Embedded iFrame not resizing

  • Profile Image
    TSellers
    Asked on February 25, 2014 at 03:29 PM

    I have a responsive web page. I really like the idea of embedding teh iFrame code so I don't have to cut and paste the html each time I update. However, when I embed the iFrame code, it does not appear to resize, and the option box drop down arrows quickly disappear. Is there a trick you can use with a responsive web page to make the embedded iFrame also responsive so it will resize?

  • Profile Image
    pinoytech
    Answered on February 25, 2014 at 05:34 PM

    Hi there,

    Can you please inject this custom css into your form to fix the width issue?

    .form-all {

    width: 598px !important;

    }

    .form-collapse-table {

    width: 550px !important;

    }

    From:

    To:

    Here's the guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you need further assistance, please let us know.

  • Profile Image
    TSellers
    Answered on February 25, 2014 at 06:01 PM

    Thanks for that. I save the form after injecting the css snippet as instructed, it looks like the iFrame code remains the same, so should I see the change by just doing a page refresh in the browser? SO far I am not seeing it, so I must be missing a step.

  • Profile Image
    EliezerN
    Answered on February 25, 2014 at 08:28 PM

    Thanks for getting back to us.

    Upon checking your embedded form I found that you have changed your code from iframe to Embed code. Due to that the form is not working properly, the Form collapses do not open, they keep freezed. It is most likely a script conflict is happening between your form and your webpage. To fix it kindly use the iframe instead.

    So, regarding to the width issue, please try using this CSS code now: 

    .form-all 

    {

    max-width: 598px !important;

    width: 598px !important;

    }

    .form-collapse-table 

    {

    max-width: 550px !important;

    width: 550px !important;

    }

    The max- preffix will force the form width to be narrower. Please give it a try and inform us if that works or if you need further assistance.

    Thanks

  • Profile Image
    TSellers
    Answered on February 25, 2014 at 08:56 PM

    THanks for the Head's up regarding the iFrame. So I changed the CSS snippet in the form, then placed the iFrame code into the page. As it seems to have the same problem, perhaps I'll have to figure out what part of the web page had got the iFrame straight jacketed and won't let it move.

  • Profile Image
    Cesar
    Answered on February 25, 2014 at 11:33 PM

    Unfortunately, dynamic iframe size is not possible with iframe. Iframe works with fixed height, so you will need to set the height according to the highest value that will allow your complete form to be seen on the iframe embed code.

    Thanks

  • Profile Image
    TSellers
    Answered on February 26, 2014 at 12:19 AM

    Thanks,

    I'll see if I can reset it to match a standard smartphone resolution.