date fields displayed incorrectly on iPhone

css, html, javascript

Solution

I looked a little through the code and I found out that a declaration in one of the css included is what's causing the problem. You seem to merge all your style so I don't know exactly in which one is it (datepicker.css ?), anyway, the declaration

 .datepicker:before{content:''; display:inline-block;}

Is what's causing the problem. I don't know exactly the purpose of that in the grand scheme, but just deleting the declaration, or changing the `display` type from `inline-block` to `block`, makes everything all right.

Try to investigate starting from there,avoiding to break the style for other browsers already working, and understand the meaning of those `inline-block`, since they're present in both `.datepicker:before`and `.datepicker:after`

Problem

On the Accommodation tab of this page, there are a couple of date fields that use this datepicker. Everything works fine on a desktop browser, but when the page is viewed on an iPhone the dates are shown below the fields: Incidentally, I tried upgrading from the current (deprecated) datepicker to this newer version, but it didn't work out.

Original source