The FormTitan is a pixel-perfect form builder and you can create perfect form designs with it. However, no tool is perfect and even in the best of tools there are sometimes small display issues. what you should keep in mind is that it is solvable, and you should know how to do it.
An example for such an issue is having an unwanted scrollbar in your published form.
Why do I have an unwanted scrollbar in my published form?
First you must understand that the original reason behind an added scrollbar is to allow the users to reach overflowing content that cannot otherwise be revealed. So if you find an unwanted scrollbar on your form - this is a really good hint that the content is overflowing.
Each form has an exact width and height dimensions (in pixels), so if the content of this form is larger than these dimentions it will create an overflow, which will result in a visible scrollbar. This is true for horizontal as well as vertical scrollbars.
An unwanted scrollbar issue may occur in several situations:
- if you create a form and and one of your elements is "sticking out" (even by a pixel),
- if you are using an old un-supported browser.
- if you are trying to embed a form which is larger than the space it is intended for.
How to fix this?
1- The first thing you should check is that none of the form content is sticking out of its boundaries. You can do so by pressing on CTRL+A (Select All) to select all the form elements. Once selected each element container will be visible and you will be able to see if it is overflowing.
Another tip is looking for Red borders - when an element crosses the form borders it is usually get a red border.
If you do find an element sticking out of your form boundaries simply move it back in and save the form.
In the Image: a section and a dropdown element are sticking out f the form boundaries.
In the Image: The published form has a scrollbar added to it, and the dropdown element is cut.
2- If you are embedding your form in a webpage or blog. (as an Iframe or Script), make sure to place it inside a container that is bigger, or has the same size.
3- If all else fails you can use a quick fix by adding something small to your form's CSS.
This will make sure the overflow is clipped, no scrollbar will visible and the rest of the content will be invisible.
- Simply enter your form,
- Go to the "Properties" panel > "Form" > "Style"> "Css"
- and paste the following code inside the textarea (overflow - x is to remove a horizontal scrollbar and overflow-y is for hiding the vertical scrollbar):
body.FormPreviewWrap {
overflow-x: hidden;
}
body.FormPreviewWrap {
overflow-y: hidden;
}