When viewing with Apple products(Iphone, Mac, and Ipad) some of the input fields are off to the side.

  • rmock
    Asked on February 10, 2016 at 6:16 PM

    In my form Homeowner's Policy when viewing on Apple products the input fields on one page are off the brown center area where all the other inputs are. I have uploaded a screen shot to help illustrate what I am experience.

    When viewing with Apple products(Iphone, Mac, and Ipad) some of the input fields are off to the side Screenshot 20

     

  • Chriistian Jotform Support
    Replied on February 11, 2016 at 1:37 AM

    I checked your form in an OS X emulator and I was able to confirm that some fields overlap when viewed in the Safari browser. 

    When viewing with Apple products(Iphone, Mac, and Ipad) some of the input fields are off to the side Screenshot 30

    The issue also seems to occur in Windows 10 when the Safari browser is used.

    When viewing with Apple products(Iphone, Mac, and Ipad) some of the input fields are off to the side Screenshot 41

    Allow me to investigate this issue further and I will update you on this thread once I have a workaround.

     

  • Chriistian Jotform Support
    Replied on February 11, 2016 at 2:18 AM

    I was able to find the cause of the issue you were having, which is the clear: none; css code.

    To fix the form, please inject this css to your form:

    .form-col-4,.form-col-5#id_153,.form-col-6,.form-col-7,.form-col-8,

    .form-col-9,.form-col-10,.form-col-11,.form-col-12,.form-col-13{

    clear:both!important;

    }

    Here's a guide on how to inject css to a form: How To Inject Custom CSS

    As you can see in the screenshot, the form appears properly once the code has been injected.

     When viewing with Apple products(Iphone, Mac, and Ipad) some of the input fields are off to the side Screenshot 20

    You can check out this cloned form where I injected the css: https://form.jotform.com/60411157584958 

     

    If you like, you can also clone it to your account by following this guide: How To Clone an Existing Form

  • rmock
    Replied on February 13, 2016 at 5:06 PM

    I cloned the form that you have and it shows up normal on my Mac now but when I open the link on my iPhone and Android the same problem still occurs. Let me know if you know what may be causing this. Thank you for the help!

  • Kevin Support Team Lead
    Replied on February 14, 2016 at 12:09 AM

    Try making your form mobile responsive.

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

    I did it in a cloned version of your form and it worked, take a look on it here: https://form.jotform.com/60439060516956