Title: Fullscreen form
Last modified: October 25, 2021

---

# Fullscreen form

 *  Resolved [alevel](https://wordpress.org/support/users/alevel/)
 * (@alevel)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/)
 * Hi Codepeople,
 * I’m trying to create a template layout whereby the (multi-page) form stretches
   to the full height of the screen with the .pbNext en .pbPrevious button div’s
   fixed to the bottom of the screen. Any overflowing content should scroll inside
   the page and not cause the whole window to scroll.
    I have managed to position
   the buttons and get the outer div (.pbreak) to full height. However, no matter
   what I try, the inner div’s/fieldsets keep overflowing and cause the entire screen
   to scroll. The only thing that seems to work is putting in a fixed height (in
   px) for the inner div’s, but that is no good since actual screen sizes may vary.
   I’ve tried using ‘calc’ or ‘100%’ for height and/or max-height in all sorts of
   variations, but no combination works the way I want. I would appreciate some 
   tips on what to put in the css to get the behavior I’m looking for. Thanks!
 * Best regards, Alex

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/#post-15003068)
 * Hello [@alevel](https://wordpress.org/support/users/alevel/)
 * Please, send me the link to your form to check your personalized styles.
 * Best regards.
 *  Thread Starter [alevel](https://wordpress.org/support/users/alevel/)
 * (@alevel)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/#post-15003294)
 * Hello,
 * The form/template I’m working on are still on my dev-environment (localhost),
   so difficult to share a link at this point. Sorry.
 * What would help me though, is to understand which selectors to use to control
   the height of the inner div’s of the form, I mean inside the .pbreak class (+
   the fieldset that is automatically added by cff for each page). Most of my form-
   pages use a fieldset container as wrapper and sometimes a second fieldset inside
   that first container. The outer container should fill-up the entire screen that
   remains after the form header and the ‘footer’ which holds the previous and next
   buttons, are subtracted. If the form content exceeds the height of the outer 
   container, it should scroll inside of that container but not cause the entire
   screen to scroll. Thanks!
 * Best regards, Alex
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/#post-15003338)
 * Hello [@alevel](https://wordpress.org/support/users/alevel/)
 * The problem is not in the form. If you want to configure a tag into a page at
   100% height, its container must define a height. For this reason, I need to check
   your page because the styles modifications begin in other places, not the form.
 * For example, you can enter the following style definition through the “Customize
   Form Design” attribute in the “Form Settings” tab:
 *     ```
       html,body,form,#fbuilder{height:100% !important;}
       #fbuilder{overflow-y:auto;padding-bottom:50px;}
       .pbNext,.pbPrevious,.pbSubmit{position:fixed;bottom:10px;}
       .pbNext,.pbSubmit{right:30px;}
       .pbPrevious{left:30px;}
       ```
   
 * However, it is only an idea.
 * Best regards.
 *  Thread Starter [alevel](https://wordpress.org/support/users/alevel/)
 * (@alevel)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/#post-15007224)
 * Hi,
 * Finally got it working with the below settings in the template style.css:
 * html, body, form {
    height: 100vh; } #fbuilder { height: 100%; overflow-y: hidden;}#
   fbuilder fieldset>.fields.cff-container-field { height: calc(100vh – 205px); /*
   header + footer + margin = 205px */ overflow-y: auto; } #fbuilder .pbPrevious{
   position: fixed; bottom: 10px; left: 50px; } #fbuilder .pbNext, .pbSubmit { position:
   fixed; bottom: 10px; right: 50px; }
 * Best regards,
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/#post-15007256)
 * Hello [@alevel](https://wordpress.org/support/users/alevel/)
 * Excellent !!!! Thank you very much for sharing your solution.
 * Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Fullscreen form’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [4 years, 7 months ago](https://wordpress.org/support/topic/fullscreen-form/#post-15007256)
 * Status: resolved