Make i-Frame Responsive

  • Profile Image
    epicfilters
    Asked on April 10, 2016 at 05:53 PM

    Hi, 

    I have a website. http://www.epicfilters.com/get-started 

    I have having a ton of trouble with it showing up correctly for mobile. I read some of your earlier responses where you guys mentioned the user needs to change the CSS. However, I am still having trouble. 


    Please let me know!

  • Profile Image
    BDAVID
    Answered on April 10, 2016 at 06:01 PM

    First of all, your form's iFrame height needs to be increased:

     

    Please look for the height property of you iFrame code and increase it so your forms display all, try with 1250px.

    On regards of the mobile responsive issue, try adding the mobile responsive widget in your form: https://widgets.jotform.com/widget/mobile_responsive

    https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form

    Let us know if you need more help.

  • Profile Image
    epicfilters
    Answered on April 10, 2016 at 06:21 PM

    Thanks! 

    Do I need to redeploy the iframe after I add the responsive widget? 

  • Profile Image
    epicfilters
    Answered on April 10, 2016 at 06:37 PM

    Still no luck on mobile. What is funny is within Page Cloud mobile it looks perfect, but then when you try an actual mobile phone it does not work!

  • Profile Image
    Kiran
    Answered on April 10, 2016 at 07:23 PM

    If you are changing the height in the iframe embed code, it is required to re-embed the form on your web page. Could you try embedding the form again using complete iframe embed code that can adjust the height automatically? Please refer to the guide below that can help you in getting the iframe embed code for your JotForm.

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image
    epicfilters
    Answered on April 10, 2016 at 07:43 PM

    Hi, 

     

    We did. We are still having issues with the mobile. It does not look like the mobile widget is working ... Can you please help, I am loosing customers :-(

     

     

  • Profile Image
    ashwin_d
    Answered on April 10, 2016 at 09:16 PM

    Hello epicfilters,

    I did check your webpage and did not find any issue with that. The embedded form is already mobile responsive. Please check the screenshots below:

     

    I believe, reducing the width of your form will help you further. Please inject the following custom css code in form and see if that helps you:

    @media (max-width: 480px) {.form-textarea,.form-textbox,.form-dropdown, .form-html

    {width: 100% !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

    .form-label-left, .form-label-right{width: auto;}.form-buttons-wrapper{margin-left:0 !important;}

    .form-input {width: 100%;}.form-all{width: 75%;}

    .form-sub-label-container {width: 100%;display:block;}

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image
    epicfilters
    Answered on April 10, 2016 at 09:45 PM
    So you want me to implement this code?
    ...
  • Profile Image
    ashwin_d
    Answered on April 10, 2016 at 09:47 PM

    Hello epicfilters,

    Yes, please inject the above custom css code and see if that gives you a better look.

    Do get back to us if you have any trouble.

    Thank you!

  • Profile Image
    epicfilters
    Answered on April 11, 2016 at 10:12 PM

    Hi, 

     

    Still having issues as it is still not fixed. Any other ideas? 

  • Profile Image
    epicfilters
    Answered on April 11, 2016 at 10:45 PM
    Hi,
    It is still not working :-( Any other options?
    ...
  • Profile Image
    Kiran
    Answered on April 12, 2016 at 12:14 AM

    As we check the JotForm using direct link on a mobile phone, the form is displaying without any issue. 

    However, when the web page is checked on the mobile I notice that the object on your web page embedding the form iframe code is slightly larger which might be causing the issue. 

    Please try reducing the object width to 10px lesser than the existing on your webpage builder and see if that helps. It looks like you are using PageCloud page builder to build the webpage. If you are not sure how to change the width of this object, you may also take support from the web page builder.

    If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image
    epicfilters
    Answered on April 17, 2016 at 09:52 PM

    Hi, 

     

    I believe have done this and it is still not working. Could you please check if done correctly, and possibly propose an alternative solution if one does exist.

     

  • Profile Image
    jonathan
    Answered on April 17, 2016 at 11:11 PM

    The latest solution provided by our colleague Kiran is something that can be applied only on your website page.

     

    You will need to use your website page editor to modify this part of the code on the page

     

    <div class="object iframe" style="width: 887px; height: 1054px; position: absolute; left: 49px; top: 73px; background-color: rgba(0, 0, 0, 0);" data-alt-style="width: 430px; height: 1662px; position: absolute; left: 7px; top: 200px; background-color: rgba(0, 0, 0, 0);"><iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60999404528164" frameborder="0" style="width: 100%; height: 100%; border: none;" scrolling="no" marginheight="0" marginwidth="0" data-muted="false">

        </iframe></div>

    </div>

     

    Let us know if you are not able to do this.