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

  • Profile Image
    rmock
    Asked on February 10, 2016 at 06: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.

     

  • Profile Image
    Chriistian
    Answered on February 11, 2016 at 01: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. 

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

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

     

  • Profile Image
    Chriistian
    Answered on February 11, 2016 at 02: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.

     

    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

  • Profile Image
    rmock
    Answered on February 13, 2016 at 05: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!

  • Profile Image
    Kevin_G
    Answered 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