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

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

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.

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.

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.

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;

}

}

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

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

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. 

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

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.

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

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;

}