First, see our product onboarding for a good example of a multi page form with a fixed height:

\

Instructions

The process of creating a multi-page form is simple:

1. add a container to your form,
2. add or remove columns from the container according to your wishes
3. add form item(s) to the container
4. place the view break item under the container,
5. optional hide the additional view break navigation
6. add a custom class to each container, e.g., fixed-height-container
7. with custom CSS set a min-height to the container
8. 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.

\

Notes

• 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 !important to the min-height setting to override potential defaults

Visual instructions

See the visual instructions below on how to create a fixed-height multi-page calculator in our app. As an added bonus, we also included the finished calculator.

Step 1-3: Adding the container and the form elements