Form height unable to satisfy both PC browser and Mobile

  • Profile Image
    benzy16
    Asked on August 16, 2013 at 10:17 AM

    We can't get the iframe height to fit well on both browsers and mobiles, the default height it gives us is 457 which leaves a heafty white gap under the form so reducing this can give us a good fit on the computer browser but cuts off the submit button on mobile browers, currently we have it set to appease the mobiles but we would like a good fit on both, using height:auto; simply gives us 100px height, cutting out most of the form any advice for this issue?

     

    Please ignore the image posted, I have fixed that issue and removed the question from this post.

  • Profile Image
    jeanettebmz
    Answered on August 16, 2013 at 03:59 PM

    Can you please try adding the code below in your HTML header before the </head> tag?

    <style>

    iframe, iframe#JotFormIFrame { height:200px !important; }

    </style>

    Then add the code below in your form styles (use this guide to know how)

    @media only screen and (max-device-width: 320px) { iframe,.form-all { height:200px !important; } }

     

    -You can adjust the Height and width of course.

    In general we recommend the followin witdh for  Smartphones:

    320px for portrait view

    480px for landscape view

    I hope this help. Let us know if further help is needed

  • Profile Image
    benzy16
    Answered on August 20, 2013 at 04:49 AM

    Thanks Jeanette,

     

    I have added in the code but it's not made any differnce, I have even increased the px of the max-device-width just to make sure it covering my iphone and increased the height: significantly but it is still cropping off the end of the form on my phone.

     

    Ben

  • Profile Image
    jonathan
    Answered on August 20, 2013 at 07:42 AM

    Hi Ben,

    Perhaps you should also add a meta content that will allow scaling of the form.

    Can you please try adding the meta code like this

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

     

     

    Simply insert that code between the head tag of your page <head> </head>

    Please try this and check again if it makes the difference.

    Thanks.

  • Profile Image
    benzy16
    Answered on August 20, 2013 at 08:39 AM

    This did not work but I discovered that the left floating enquiry label was not working on the phone it was going above the field pushing the form down, I have set it to float right and it works. The form is now fixed however the submit button is much fatter on the phone is there a way to correct this?

    Ben