How can I set form height and scroll option?

My issue is with the form titled, "Starter Website".  The <script> embed option works fine, but it takes more than five seconds for the form to load, which temporarily breaks the page it's embedded in.

The <iframe> option loads instantly, but the height of .supernova is screwed up.  No matter what the screen size is, the .supernova container NEVER shows the entire form.  It always requires the user to scroll, which makes no sense.  I can go in the CSS and manually set the height, but that is tedious with the responsive nature of the form.  I need a fix for the iframe embed method because it loads most efficiently.  Also, can you reset my view count for that form?  Every view it has towards my view limit has been ME trying to fix whatever the issue is.

Thanks!

I was able to reproduce the same issue. I embedded my form using the iframe code.Setting the height property of the iframe code will help you. Please look at these.
Firstly, please remove this code from the CSS.2. Get form's iframe code.3. Change iframe's height property from 539px to 700px.4. Re-embed your form.
As a free user, you have 1,000 form views per month. It will reset on every first day of months. We can't reset it on our side.  Please check our plans to see account limits.

Thanks for the quick response!

That solution works when I also substitute the iframe ID ending in 7963, but it breaks my PayPal widget (as your image demonstrates).  When I change only the height in the latest version of the iframe embed code, the scroll issue remains (though my PayPal widget works).

In the iframe embed code, try sets Scrolling to "Auto" also.

Example:

Let us know if this did not work. It will also help if you can share to us the website page where the form was embedded so we can check/test the actual form on the website.

That made it easier to scroll, but the container still won't automatically adjust to the proper height to fit the entire form.

I uploaded a simple page with the embedded form to https://bit.ly/2OneCIr

It might be better if you would disable scrolling in iFrame code.

Since it would be better user experience if user would scroll the whole form and not the iframe.

And that's because of the page scroll bars.

The form's height is bigger than the page's height so the scrolling is necessary.

Could that work for you?

I set scrolling in the iframe code to "no".  It does make it easier for the user to scroll the form without scrolling the page, itself.

Is it accurate to say the only way to achieve my goal is using media queries in the CSS to manually change the .supernova element height every time inputs in the form switch to inline-block to be responsive?  This seems to be the only way to force the entire form to fit on my page without giving the form a separate scroll bar.

It looks like, as you implied, this is the nature of an iframe.

Then again, I tested the <script> embed method on my dev environment, which doesn't take advantage of server-side caching like my web server does.  That might help the load time issue I was having with Paypal widget.  Still nice to know all of my options.

I think you can also try adding a min-height property to form's iframe. Here is a test page: https://shots.jotform.com/victoria/v/embed/111.html 

Is it accurate to say the only way to achieve my goal is using media queries in the CSS to manually change the .supernova element height every time inputs in the form switch to inline-block to be responsive?

It seems to me that there is no way to control supernova element via media queries in the CSS. Please try setting min-height for the iframe. Then, for mobile layout, I would suggest to resize some form elements to make them fit the 'container'. This should be possible via form's CSS section. 

Please let us know how it goes for you.

Adjusting the min-height property for the iframe works.  Can't be too exact on smaller screens because the .form-line padding-top and padding-bottom is set to a percentage.  Changing the vertical padding in the Line Layout section of the advanced designer for the form doesn't override the percentage.

It's much easier to use the <script> embed and hope the Paypal widget loads quickly.

Thanks for your time!