How can I create this iframe to appear correctly on an iphone?

  • Profile Image
    andypromo
    Asked on March 11, 2014 at 03: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

  • Profile Image
    Jeanette
    Answered on March 11, 2014 at 05: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" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotformeu.com/form/40585999501365" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="yes"></iframe>