Responsive form on iPhone not fitting

  • Profile Image
    dogboy
    Asked on March 31, 2014 at 05:00 PM

    I have a long form embedded on my site, which is responsive.  I've read through a number of posts here on the forum regarding jotform and its responsive behavior, and tried injecting several of the CSS codes to no avail.

    My form looks fine on my iPhone 4s in Landscape view, but in Portrait view it is extending off the side of the screen and I can't seem to figure out why.  See screenshots.

  • Profile Image
    Cesar
    Answered on March 31, 2014 at 05:57 PM

    I have cloned your form and injected the following CSS code in to it:

    @media only screen and (max-device-width: 550px){
    .form-all{
    width:360px !important;
    margin-left:-30px !important;
    float: left !important;
    }}


    This is my cloned example form: http://form.jotformpro.com/form/40896995128977?

    Do let us know if you need further assistance. Thank you.

     

    Related Article:

    How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    dogboy
    Answered on March 31, 2014 at 06:40 PM

    Hmmm, thanks for your help.  When I look at your cloned form in Portrait on the iPhone, it looks fine.  When I inject that CSS in to my form and look at it on my site, it looks worse in both Landscape and Portrait.  I must have some conflicting css somewhere.

    http://www.localdogrescue.com/adoptionapp.html

     

  • Profile Image
    jonathan
    Answered on March 31, 2014 at 07:44 PM

    Hi,

    You may want to try re-embedding the form to your website using its iframe code embed.

    Use this guide -Getting-the-Form-iFrame-Code

    Right now, I could see that you are using script embed which could be causing script conflict with the other scripts existing on the web page. Using iframe embed should prevent these script conflict.

    Please inform us if issue still remains.

    Thanks!

  • Profile Image
    dogboy
    Answered on March 31, 2014 at 09:56 PM

    Hi, I had tried embedding the form using the iFrame method before.  With scrolling="no", the form is cut off when viewing on iPhone but okay on desktop (in firefox).  When I set scrolling="yes", the form looks okay on the iPhone but I get the right-side and bottom scrollbars when viewing on the desktop, which is uneccessary (and ugly).  I can't seem to get it to look "normal" on both handhelds and desktops.  It either looks good on one and not on the other, or vice versa.

     

    *Edit - I should add that when using the iFrame method with scrolling="yes" and that css injected from your first reply, the form doesn't even show up on iPhone...

  • Profile Image
    Cesar
    Answered on March 31, 2014 at 11:58 PM

    I currently see no scrollbars on the desktop version. And it appears to display ok on a Nexus 7, when I do try to view it at this time on my mobile phone (android) I do see the form renders for a fraction of a second but then disappears off the page. 

    I will try performing furhter tests on your form. Once I have an update on this I will update you on your thread. Thank you.

  • Profile Image
    Cesar
    Answered on April 01, 2014 at 12:44 AM

    I have modified the code, utilizing only the following CSS Code:

    #label_46{display: none;}

    @media only screen and (max-device-width: 550px)
    {.form-textbox{
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;}}

    Please try it out. Do let us know of you need further assistance. Thank you.

  • Profile Image
    dogboy
    Answered on April 02, 2014 at 09:46 AM

    So its pretty much back to square one now.  When viewing it using iFrame method it renders fine on desktops (except for the right and bottom scrollbars on Firefox) and fine in Landscape mode on iPhone, but in Portrait in iPhone its expanding off the right side of the screen.

    I also tried using the Embed method and its the same rendering results on the iPhone, and the same on the desktop (minus the scroll bars).

    I can just live with it as-is unless you want to continue trying.  I appreciate your help.

     

    Here's a screen shot showing scrollbars in Firefox using iFrame: http://awesomescreenshot.com/05e2l7s8ab

  • Profile Image
    Carina
    Answered on April 02, 2014 at 10:44 AM

    While using the iFrame method I tried changing scrolling to "auto" and the scrollbar disappeared in firefox. I also found this method for hidding scrollbars but still allow scrolling.

    Let us know if we can be of more assistance.