Resize jotform iframe to fit parent window size

  • englep10
    Asked on September 22, 2014 at 11:26 PM

    Hello, I am having some difficulties. Placing the code that I built here into my pages. I am using Dream Weaver and I want my form to be as responsive as possible. What I envision having is being able to place my form into one of these floating boxes.  My Webpage Theme that I am using. However whenever I enter the code the form is too large or is not responsive how I want to be. 

    Any help will be greatly appericated!! 

    Please, I am running close on a deadline and want to get this finished soon. 

     

    Best Regards,

         Philip

  • Elton Support Team Lead
    Replied on September 23, 2014 at 2:02 AM

    Hi Philip,

    Have you tried using the mobile responsive widget? http://widgets.jotform.com/widget/mobile_responsive

    Or since you are using custom form templates, you can try removing the Jotform style-sheets and apply the form classes from your template within your form.

    We'd be grateful if you could provide a page where we can inspect the form. It would be easier to diagnose the problem if we can view it on our browser.

    We'll await your reply. Thank you  so much!

  • englep10
    Replied on September 23, 2014 at 10:27 AM

    http://imgur.com/c5mTb1y Sorry but this is the best I can do for the moment. I could send you the code through email.

  • englep10
    Replied on September 23, 2014 at 10:53 AM

    http://imgur.com/6lN2XmC I have made it closer. However I need help re sizing the window 

  • Ben
    Replied on September 23, 2014 at 12:09 PM

    Hi Philip,

    I took a look at the pictures, but unfortunately can not quite understand what you are looking to achieve.

    I see that in the second screenshot the header image is not being resized at all (static - not responsive), but I can not see any other changes.

    If possible, it would be great to mark the sections on the screenshot that you would like to change and then tell us about each section how you would like to change it.

    It would still be best if you could follow that with a link to some closed off page that we could visit and check. We can also make this form private if needed for that?

    Just to check, by window do you mean the iframe/frame?

    Also did you test it on a page where it would be posted as other styles might impact it differently there so it would be good to do the final polishing there.

    Best Regards,
    Ben

  • englep10
    Replied on September 23, 2014 at 12:39 PM

    Sorry my mistake, I accidentally confused you with the two images.

     

    What I want to do is to is to have the window the same size as the iframe. As you can see in the picture I am having trouble because the jotform created form is too large for the window. I would like to re-size either the Form aspect or the Window (preferably the window).

    http://imgur.com/Tk4t1hQ 

    I labeled what I thought each thing meant. But let me know if that helps

     

  • KadeJM
    Replied on September 23, 2014 at 2:22 PM

    Thank you for the clarifying your problem more.

    It's possible to adjust your iFrame's height and width but please note that making it too small will cause it to be cut off.

    Example:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42186219916157" frameborder="0" style="width:100%; height:6190px; border:none;" scrolling="no"></iframe>

     

    Now if your jotform is too small or too long then the only way to combat that problem better would be to make sure that your scrolling is set to "yes".

    Example:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42186219916157" frameborder="0" style="width:100%; height:6190px; border:none;" scrolling="yes"></iframe>

    I hope this helps but if you need more help just let us know and we'll assist you more.

     

  • englep10
    Replied on September 23, 2014 at 4:53 PM

    Hi Kade has helped with part of the problem but I am still facing a couple issues. 

    As you know since I using an ibox for my forum to enter on display on my web page I am forced to choose between mobile responsiveness and functionality. 

     

    ( What I want is for when my users are on the computer they see: 

    http://imgur.com/tyGEVmZ

    If my user is on their mobile device I want them to see: 

    http://imgur.com/FkkrD3U ) <what I do want

     

    ( However what I am currently stuck with is depending on whether I include the mobile responsive widget:

    So when I have the widget running my computer users see:

    http://imgur.com/pVMhhZs

    When I dont have it running my user on  mobile sees:

    http://imgur.com/UmPuDXN ) <what i dont want

     

    Please let me know if this is possible. Thank you very much!

     

     

  • Mike_T Jotform Support
    Replied on September 23, 2014 at 6:20 PM

    I can not reproduce the issue with the cloned version of your form and mobile responsive widget, the form is responsive and looks good on my side on both PC and Mobile.

    The form appearance might be affected by your website styles, so we need to check the published site to be able to advise on how to move forward.

  • englep10
    Replied on September 24, 2014 at 12:09 AM

    I will be sure to post direction to the site shortly. Still working

  • Elton Support Team Lead
    Replied on September 24, 2014 at 1:43 AM

    @englep10 

    Thanks in advance. It would be a lot more easier if we can diagnose the problem on our browser. We'll look forward to hearing from you.

    Regards!