View Break Element

Insert this to break up your calculator into multiple pages.

Options

  • Button text: Add your button text. (e.g., Next).
  • Show Button: You can hide the View Break element when you add a “Button” element and toggle on the option: “Navigate to next view after submission”.
  • Show/Hide Logic: Toggle this if you want to control if the button is shown or hidden under certain circumstances.
  • Visibility formula: If the result of the formula is TRUE or a number above 0. The question is visible. If the result is FALSE or 0, it’s hidden.
  • Hide/Show page numbers by clicking on the top right of your editor: “Adjust calculator settings”->” Show view break navigation”.

Scroll to the Top issues

When the top of the calculator is out of view when navigating to a new view, the calculator automatically scrolls to the top of the calculator. When you have a website with a "fixed" header that falls on top of the content, it will not navigate to the top perfectly because the header will "fall on top of the calculator". In order to fix this, you need to add the following line of Custom CSS in the calculator builder and your website's CSS:

.cc {
 padding-top: 50px // Change the number of pixels to the height of your header
}
Now the calculator should scroll to the top properly. If there are still cases where scrolling to the top doesn't work, make sure to check if scroll-behavior is set to auto.

Related articles

Learn more about view break in one of the following articles