First, see our product onboarding for a good example of a multi page form with a fixed height:
The process to create a multi-page form is simple:
- add a container to your form,
- add or remove columns from the container according to your wishes
- add form item(s) to the container
- place the view break item under the container,
- optional hide the additional view break navigation
- add a custom class to each container, e.g.
- with custom CSS set a
min-heightto the container
- REPEAT steps 1-6 for each page
Now your calculator form will have a constant height. Avoiding the annoying page jumps. Please see the instruction images below on how the process looks in our app.
- Learn more about styling your form with CSS
- Make sure that you set a
min-height(CSS for the minimal height of an element) of your container based on the 'tallest' page.
- Keep in mind that items with show-hide logic influence the height of your container
- You can add
min-heightsetting to override potential defaults
See below the visual instructions of how to create a fixed height multi-page calculator in our app. As an added bonus, we also included the finished calculator.