Hello @alevel
Please, send me the link to your form to check your personalized styles.
Best regards.
Thread Starter
alevel
(@alevel)
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
Hello @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
(@alevel)
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,
Hello @alevel
Excellent !!!! Thank you very much for sharing your solution.
Best regards.
