Hi,
I’ve just tested myself on an iPhone with iOS 7 and the Twenty Fourteen theme, but I can’t reproduce the issue. It’s likely a conflict with your theme. If you send a link I’ll take a look and see if I can find the problem.
Hi, the site has a password at the moment as it’s not live to the public. The link is: http://www.theloosebox.co.uk/new/booking/
Can you send me your email so I can send the password to view?
Thanks, Adam.
Hi Adam,
Send me a message through the contact form on my site.
Hi Adam,
I just tested your site and I’m unable to reproduce the problem. Although the date picker does appear at the bottom of the screen (not off the screen), it doesn’t require any scrolling. The time picker worked out fine for me.
I would suggest clearing your cache to see if perhaps there’s some old stylesheet that’s lingering on your phone.
Strange. When I select the date field the overlay background shows but the calendar itself is stuck at the bottom of the page (off screen). If I select ‘Done’ from the bottom right of the browser to indicate I’ve finished editing that field, then the calendar appears on screen at the bottom. Any thoughts?
Did you clear the cache on your phone? That’s really the only good idea I’ve got. The date and time picker library is very widely used and tested, so you can check the issues to see if anyone else has reported problems.
You could also try to switch to a default theme, like Twenty Fourteen, and test it there. That should tell you whether there’s something specific to your theme that’s causing the problem or if it’s related to your device in some way.
Aside from that, I did take a look at the code on your site to see if I noticed any conflicts. I didn’t see anything that looked like a good candidate, but there are two things I noticed which you might want to try:
1. In your head you print the following:
<meta name=”viewport” content=”user-scalable=0″ />
Try removing this or replacing it with:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
2. Your body has a min-width set on it. This is probably large than the width on your iPhone. Try removing that to see if it helps at all. Not sure why that would cause an issue, but maybe there’s some zooming stuff happening or something.
I’ve tried all the above and still have the same issue. It seems to be to do with safari on ios7 allowing you to select/focus on the date and time fields which takes priority over displaying the calendar overlay until you select done, then it brings it in to view. Could it be ignoring the readonly value of the field?
Hi,
It’s hard for me to say. Since it works fine for me on an iOS 7 phone, it could be something specific to your device. But I’m not that familiar with iPhones so I don’t know what that could be. For me, there’s no select/focus behaviour which pops up a “done” button.
The fact that it’s happening for you on the default Twenty Fourteen theme as well seems to confirm that it’s device-specific. The library gets heavy use on iPhones so I’d expect to find a lot of compatibility complaints in the datepicker.js github repo if it was a common problem for iOS 7 devices.
Hi Adam,
Were you ever able to resolve this issue or are you still having trouble?
Hi, it seems to be an issue with iOS 8 Safari not handling readonly fields correctly. I’ve found a couple of forum threads discussing the issue but no solution yet. Plugin works great either way – this seems to be a wider issue with iOS 8.
Thanks Adam, looks like you’re right! I just happened to have a friend around with an iOS 8 device and I was able to replicate the problem.
It looks like the issue has been reported with the pickadate.js so you can follow along there. If it’s indeed an iOS 8 issue, they’ll probably just close it and wait for an update to iOS 8. But if it’s something else they may put out a fix.
Thanks for reporting.
A quick update: it looks like this issue has been fixed and an update is on it’s way. I’ll get the plugin updated as soon as it’s out.
It looks like the next version of the pickadate.js library is a little slow in coming. If this fix is urgent for you, one user has reported that replacing the picker.js file with the latest version works without any problems.
To do this, you would replace the file in /wp-content/plugins/restaurant-reservations/lib/simple-admin-pages/lib/pickadate/picker.js with the latest version here. (Only recommended for the adventurous.)
Hi Adam,
Fixing this iOS 8 bug turned into a bit of a saga. But I’m happy to say a fix will be available tomorrow when I release version 1.3.
