What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Embedded iFrame not resizing

    Asked by TSellers 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?

    Page URL:
    http://mparam.s3.amazonaws.com/temp.html

    iframe code height jpg and
  • Profile Image

    Answered by pinoytech 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

    Answered by TSellers 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

    Answered by EliezerN 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

    Answered by TSellers 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

    Answered by Cesar 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

    Answered by TSellers on February 26, 2014 at 12:19 AM

    Thanks,

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