Date Picker field is broken on mobile

but now the "Date Picker" element is broken on
mobile. Please take a look at that and let me know what you think.

Is your issue related to this form http://www.jotform.us/form/71198713579166?

I have tested that form on my Samsung Galaxy S4 and DateTime field is working correctly. 

I only noticed that minutes are cut off.

To resolve this issue add this CSS code to your form:

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

{

select#ampm_12 {

    width: 80px!important;

}

}

If you have some other issue with DateTime field, please provide us more details about your issue. Also tell us which device are you using and if possible provide us a screenshot of your issue. 

If you have issues with some other form provide us ID of that form. If the form is embedded, please provide us URL of the webpage.

Let us know if you need further assistance. 

Hi BJoanna,
Thank you for the code to fix the minutes on the Date Picker, that was
going to be my next question:) Yes indeed, that is the form I'm concerned
with. I have been trying to get the background image to stay fixed while
scrolling and the following CSS code was suggested:
.supernova {
background-repeat: no-repeat;
background-attachment: fixed;
}
@media screen and (max-width: 480px){
.supernova {
background-image : url("https://www.jotform.com/
uploads/fondudes/form_files/Payment%20Background%20(from%
20Mobile%20Layer%20-%20How%20it%20Works-04).243.jpg

");
background-size : cover;
height : 100%;
overflow : hidden;
}
body {
height : 100%;
overflow : scroll;
-webkit-overflow-scrolling : touch;
}
}
The code worked to keep the background image fixed but broke the Date
Picker, so I've since removed the code. Do you have any idea why this code
is causing the Date Picker to malfunction?
...

I have cloned your JotForm and tried adding the code provided by you. However, the issue with the date field is still occurring with or without this code. Please note that you can make the background fixed from the Background image section of advanced Form Designer. The code provided by our colleague applies to the particular date field only to increase the width.

Hope this information helps!

Hello Kiran,
Unfortunately, fixing the background using the advanced form designer
doesn't work, which is how the conversation first began. Nik provided the
code above, which worked but also caused the Date Picker to break.
...

Okay. I was checking the form on an Android device. When I checked the form on an iPhone emulator, I still see that the date field is not affected by the earlier code. However, could you try adding the both CSS codes to the form to see if that makes any difference?

Please get back to us if the issue still persists. We will be happy to assist you further. 

Thank you Kiran. I did that and it appears to be malfunctioning the same
way. The date fields are behaving as if a phone number is be entered in
rather than a date, and the calendar doesn't pop up upon entry into any of
those three fields: month, day or year. I have cloned the form with both
pieces of CSS code injected and it can be viewed here:
https://form.jotform.us/71225863779165
...

I have cloned your JotForm and able to replicate the issue that you are experiencing. Pease allow me some time to check on this and get back to you with relevant information.

Thank you for your patience. 

Hi Kiran, I'm looking forward to getting this fixed. Any updates?
...

@fondudes, 

I have cloned your form and I can see the calendar pop up does not open on an iPhone even when the option is enabled in the date field. 

However, I have deleted all the other fields, with only the date field the issue was still there, I have then added a new date picker and I can see it works, while the existing field still does not work. 

You could test with this form: https://form.jotformpro.com/71278968947984 

If this works on your end, you could also remove your current field and add a new one, this should work for the calendar not opening. 

If there is any issue with the field layout, you could also share us a screenshot about it, this guide will help you to upload the image with your next reply: How-to-add-screenshots-images-to-questions-in-support-forum

We will wait for your response. 

Hello Kevin,
The operative problem is that the Date Picker calendar won't work when
scrolling is enabled, which I don't believe was reflected in your example.
Moreover, the only way to enable scrolling so that it works is to inject
the following code, which appears to be what is breaking the Date Picker
calendar:
.supernova {
background-repeat: no-repeat;
background-attachment: fixed;
}
@media screen and (max-width: 480px){
.supernova {
background-image : url("https://www.jotform.com/u
ploads/fondudes/form_files/Payment%20Background%20(from%20Mo
bile%20Layer%20-%20How%20it%20Works-04).243.jpg

");
background-size : cover;
height : 100%;
overflow : hidden;
}
body {
height : 100%;
overflow : scroll;
-webkit-overflow-scrolling : touch;
}
}
Please let me know what can be done. Thank you!
...

Thank you for the code, I have injected it now to my sample form and I cannot replicate the issue, I have even renamed the second field exactly like the first one and set the same properties. 

If you check on my form you can see that the date picker opens properly when you tap on the second date field.

Could you please check again on your end and let us know if you see the same behavior? 

Here's my form: https://form.jotformpro.com/71278968947984 

Here's on the first date picker field, the one where you're experiencing the issue: 

Here's a screenshot from the second field I have added to the form and you can see the calendar pop-ups properly: 

Please, let us know how it goes on your end. 

Looking forward to your response. 

Hello Kevin,
I noticed your background is not fixed in one place. The issue began upon
trying to fix the background in one place while the content of the form
scrolled in the foreground. That's what broke the calendar on the Date
Picker. Nonetheless, your example still seems not to work on iPhone 6 for
some reason. I've attached a screenshot to illustrate. Also, to hold all
else constant, it may help us to replicate the form entirely and go from
there. The content of your form wasn't enough to demonstrate scrolling more
than a single screen length.
...

Did you attach a screenshot image of the issue? It seems that the screenshot your have attached did not reach our Forum. For us to properly view, please open this thread: https://support.jotform.com/answers/1134183 on a browser and follow this guide on How to add screenshots/images to questions to the support forum?

We'll wait for your response.
Regards.

Thank you Chriistian, the screenshot has been attached. In this screenshot
I have simply scrolled the form down about one finger's width. Notice that
where the bottom border of the screen was before scrolling breaks both the
calendar and the background. In Kevin's example the form isn't long enough
to demonstrate what's been happening with my form but, if it were longer,
you wouldn't see the calendar at all, as it would be below the bottom
border in it's entirety. Scrolling would reveal nothing except a break in
the background at that horizontal.
...

Hello, I checked your form "http://www.jotform.us/form/71198713579166" on an iPhoe simulator. I cloned it and fixed the background, and I can replicate the issue.

The issue here si that the fix checkbox on the Advanced Designer should fix the background image on mobile devices.

I am escalating the issue to our developers. We will notify you via this thread when we fix the issue.

Thank you very much for reporting it.

All the best.

 

 

Hello Seth, any updates on this?
...

Unfortunately this issue is still not resolved. One of our developers is assigned to this thread and priority of this issue is set to important. Once this issue is resolved we will inform you via this thread.

Hello, it's been a couple weeks. I'm just curious as to whether or not this
issue has been resolved. Thanks!
...

We haven't heard back any updates from the developers. I will ask an update from them. Rest assured your will be informed in this thread if there are any updates on this issue.

Regards.

Thank you for reporting he issue. It should be fixed now. Could you please also test it on your side and let us know the result?