How to Put Scrolling Options on a Page in an IFrame

Are you looking for a way to put a slick-looking scrolling feature on your forms? Typically, do add scrolling, you’d set the attribute in an IFrame tag to AUTO. If you’ve tried that, to no avail, don’t give up. The CSS on an embedded form is set to not show scrollbars; the body tag is set with the class of “embed,” which forces an overflow: hidden. You’ll need to override it with your own CSS rules, which is done in the Advanced property in the Theme Builder.

Here’s what you need to do:

Currently, the following embed rules are set when you use the iframe embed code snippet:

/* ----- EMBED ----- */

body.embed{margin:0 !important;overflow:hidden !important;background:none !important;}
.embed #container{width:100% !important;border:none !important;background:none !important;}
.embed form{margin:0 !important}

To allow for scrollbars, your custom CSS would have the following line:

body.embed{overflow:auto !important}

Once you change the setting in your CSS, you should see slick scrolling bars added in.