What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Calendar (date picker) widget width is not correct on iOS (iPhone & iPad)

    Asked by aprpac on May 19, 2016 at 01:57 PM

    Hi,

    I have just noticed that your Date Picker widget does not work very well on iOS devices (both iPhone & iPad). It is very difficult to change the month and year.

    As most of my customers use this form on their mobile devices this is a bit of an issue.

    Please help!

    Thanks

    Paul

    Page URL:
    https://form.jotform.com/60333027820950

    ipad ios Mobile does not work
  • Profile Image
    JotForm Support

    Answered by Charlie on May 19, 2016 at 02:27 PM

    Upon checking your form on an iPhone 6S device, the form itself does not seem to be mobile responsive. Here's how it looks like:

     

    It gives your users a desktop like feel which is personally speaking would be quite hard to fill out on mobile devices.

    Would you prefer to make it look like this instead? (see screencast below)

     

    If so, then please follow this guide on how to make your form mobile responsive: https://www.jotform.com/help/322-How-to-Make-Mobile-Friendly-Forms-on-JotForm. You just need to enable the "Mobile Responsive" option in the Form Designer Tool.

    After that, also add the Mobile Responsive widget in your form.

    You should see that the Date Picker widget and the other fields can now be more easily be viewed.

    If that does not resolve the problem, please do provide us more information on what you are expecting to accomplish or the layout you would like to output.

    We'll wait for your response.

  • Profile Image

    Answered by aprpac on May 19, 2016 at 03:24 PM

    Thanks for your response. I have tried your suggestions on a clone of the form (https://form.jotform.com/61395291630961) however there are a number of issues:

    1) There is no margin on the left of the form

    2) The drop down e.g. the Top Line Message "Choose" is too narrow - it unnecessarily crops the text as the box only fills about 3/4 of the width of the screen (in portrait view)

    3) My original issue with the date picker has not gone away. Please can you test this yourself on a real iOS device with your finger and you will see that the arrows only work intermittently. 

    I look forward to hearing from you.

  • Profile Image
    JotForm Support

    Answered by Welvin on May 19, 2016 at 04:35 PM

    I'm checking this and will let you know the solution later. Some of us are using Browserstack for testing. Browserstack offers a 100% accuracy, I was able to see the problem there. Again, will let you know the solution later.

  • Profile Image
    JotForm Support

    Answered by Welvin on May 19, 2016 at 04:51 PM

    I've fixed it for you. Can you check? I've added the following custom CSS codes to your cloned form:

    @media only screen and (max-device-width: 768px) {

    .supernova .form-all, .form-all {

        overflow-x: hidden !important;

    }

    .form-input {

        width: 100% !important;

    }

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

        width: 100% !important;

    }

    .custom-field-frame {

    width: 100% !important;

    }

    }

  • Profile Image

    Answered by aprpac on May 20, 2016 at 09:35 AM

    Hi Welvin,

    Ok thanks I have tried the cloned form again and I am happy that you have resolved items 1 & 2 but item 3, my original issue, is still outstanding.

    Please advise.

    Thanks

    Paul

  • Profile Image

    Answered by aprpac on May 20, 2016 at 10:21 AM

    I have implemented these changes on my live form and everything is fine (except item 3 above) apart from the Preview before submit screen does not display correctly on an iPhone (the right hand side is cropped off).

    Please can you advise on this as well as item 3 above.

    Thanks

    Paul

  • Profile Image
    JotForm Support

    Answered by Welvin on May 20, 2016 at 11:36 AM

    What is your iPhone model or version? Please let us know so we can check it using the same device. I have tested the date field with browserstack, IOS 9 iPhone 6s and it looks great.

    As for the Preview window, I can replicate that and looking for a solution now. I'll let you know. 

  • Profile Image

    Answered by aprpac on May 20, 2016 at 11:45 AM

    Hi Welvin,

    I am using an iPhone 6 (iOS 9.3.2) but I also have the same issue on an older iPad. Please note it looks fine, the problem is that the arrows you tap with your finger do not work reliably. Sometimes you have to tap several times to change by one month (or year). This is annoying to the user and I am losing customer orders because of this I am sure.

    Thanks

    Paul

  • Profile Image
    JotForm Support

    Answered by Charlie on May 20, 2016 at 12:39 PM

    I think this is something related to the accuracy of the touch and the area where the buttons are specifically located. In the Date Picker widget, the arrows for the month and year are actually too small. It would be quite hard to exactly click it. I tried it on an Android device and was able to experience difficulty on the reaction or response time, it might be because my fingers are not hitting the small buttons accurately.

    Could you try this cloned form: https://form.jotform.com/61404566710956. The month is now more responsive. However, the year is somehow sometimes still missing my touches, but is now more responsive.

    What I basically did is increased the font-size of those buttons to cover much more area for our finger tips in mobile device. Here's the CSS code:

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

    .previous, .next {

        font-size: 22px;

        text-align: center;

    }

    }

    Paste it inside the Date Picker widget's custom CSS tab.

     

    You can further adjust the font-size if you want to make it more bigger or slightly smaller.

    Let us know if that works.

  • Profile Image

    Answered by aprpac on May 24, 2016 at 09:53 AM

    Hi Charlie,

    Thanks for your fix to this problem. It works much better with the larger buttons. Please could you tell me the CSS I should add to set the size of the Month and Year heading text as this now looks a bit small.

    Also, please could you get your developers to come up with a better looking version of this widget that works properly on mobile devices. I am sure for a lot of your customers they have more mobile device customers these days than desktop customers.

    Thanks & regards

    Paul

  • Profile Image

    Answered by Huberson on May 24, 2016 at 12:10 PM

    You can add this CSS in the '@media' block from Widget custom CSS and change the font size as you see fit.

    .month span, .year span{

    font-size: 18px;

    }