How can I make my form display correctly on IOS 9

  • mckbosart
    Asked on April 8, 2016 at 9:37 AM

    The format is not displaying correctly on the first upload.. if you turn the screen horizontal and then back, it will adjust but I need it to load correctly the first time. I have tried some codes I found in other threads but nothing seems to be working for me.. 

    Jotform Thread 813705 Screenshot
  • Huberson
    Replied on April 8, 2016 at 11:34 AM

    I have previewed your form on IOS but didn't notice the overlapping of the tables but some of them indeed appear to move far to the left on mobile view.

    How can I make my form display correctly on IOS 9 Image 1 Screenshot 30 

     

    Because some of the tables are pretty long horizontally, I would suggest you Expand them from Form Builder instead of Shrink and set Label Align to top to ensure a better layout. 

    You might also need to add the bellow CSS to the form to remove an extra 'padding-left' that causes some of the Textboxes to extend outside the table.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

        table td + td {

            padding-left: 0;

        }

    }

    Here is the preview after those modifications:

     

     

     

    How can I make my form display correctly on IOS 9 Image 2 Screenshot 41

     

    If you notice some of the tables don't fit well, go to Designer and increase the form width.

    Here is the modified clone: https://form.jotform.com/60983938389982

  • mckbosart
    Replied on April 8, 2016 at 1:45 PM
    Thank you! That seems to work better.. I have adjusted the longer fields.. is there a reason why some of the labels are appearing bigger on the IOS app now?
    McKayla Bosart
    Power Plus Systems, LLC
    “Your Full Service Electrical Contractor"
    Phone:843-821-8971
    www.ppselectrical.com
    ...
  • Charlie
    Replied on April 8, 2016 at 3:03 PM

    May I know which of the labels you are referring to? I checked your form on a iPhone device but it seems like the labels are quite small on initial view. You'll need to zoom in first.

    How can I make my form display correctly on IOS 9 Image 1 Screenshot 20

     

    Usually the form automatically adjust to a more user friendly layout to give your users a more convenient way of viewing the form. So there are instances that a label might appear bigger, depending on how it is styled by your theme, CSS code and the likes.