-
andypromoAsked on March 11, 2014 at 3:06 PM
I have an issue with a form that is overflowing on an iphone. Even though the form height and scroll bar have been set.
I have tried to inject CSS into my form and also directly in the iframe, however i still can not get this form to appear correctly on an iphone.
All i would like it to do is not overflow out of the frame (set at 320x320) and provide a scroll bar, on a mobile phone?
http://form.jotformeu.com/form/40585999501365
-
Jeanette JotForm SupportReplied on March 11, 2014 at 5:44 PM
If the form is embedded in a webpage try adding this code in your HTML page, before the </head> tag.
<style>
iframe, iframe#JotFormIFrame { height:320px !important; }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Then add the code below in your form styles
@media only screen and (max-device-width: 550px) {
iframe,.form-all { height:320px !important; } }
This should replace these line in the current CSS codes I found in your form
@media only screen and (max-device-width: 550px){.form-header-group{width:320px !important;}
{height:320px !important;}}
Also, make sure that after grabing the iframe code, you activate the scroll bars and that the height is set to %100 rather than in px
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://www.jotformeu.com/form/40585999501365" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="yes"></iframe>