[DatePicker][TimePicker] are unusable on iPhone5/s

[hbridge]

The bottom of both controls gets cut off by the navigation bar. Repros on the examples on material-ui.com

[mbrookes]

This is even worse (if 'unusable' can be worsened :) on the iPhone 4 with its shorter display...

[jkruder]

@mbrookes What version of material-ui are you using?

[mbrookes]

@jkruder - Thanks, 0.11.0. Let me know if you need a screenshot.

[oliviertassinari]

They merged #1266. Do this fix the issue for the date picker?

[mbrookes]

@oliviertassinari - if the proportions in the screenshots are correct, then it should nearly fit on an iPhone 4/s in WebKit View or if added to the homepage as a webapp. The bottom of the dialog will be cropped, but the buttons will be visible, so should be usable, even if not very attractive. I'll have to wait 'till it's released to test it as I'm using with Meteor via a 3rd-party wrapper package for Atmosphere (Meteor's package system), so no easy way to install from github.

For websites in Safari the problem will remain, as the navbar only reduces, and the toolbar only disappears when scrolling a longer page. Not my use case, but will certainly affect others.

[shaurya947]

@mbrookes since this issue has been resolved, closing this. If the problem with Safari still persists, feel free to open a new one.

[mbrookes]

@shaurya947 - no worries. I've updated to 0.12.1, and I'm seeing other problems, so I'll open a new issue if still I'm still seeing them once I've tested in isolation from my app code.

[m4nuC]

I am on 0.13.1 and I still have the exact same issue using Chrome Dev tool Iphone4 settings.

[shaurya947]

@mbrookes have you tested with 0.13.1? Any way you could help @m4nuC ?

[mbrookes]

I have.

On an iPhone 5, if you are using something like:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

and the content behind the datepicker isn't scrollable, the bottom toolbar will cover the buttons due to the placement of the datpicker at the bottom of the screen. (There is dead-space above it with the page content greyed out.)

If the content is scrollable, and you don't have a fixed AppBar, you can get the bottom taskbar to disappear by scrolling up the background content, at which point you can get to the buttons. Far from ideal!

In a cordova app, or webapp pinned to the homepage, there is no URL or taskbar, so it's less of an issue, but the dead space at the top is still problematic, and the fact that the sides are cropped (or at least have no shadow) as per @m4nuC's screenshot looks a bit off.

On an iPhone 4, the buttons are not visible at all, and unlike in Chrome device emulation, you also lose half the bottom row of numbers as a webapp, or all of them as a web page, and no way to scroll down to them. This is with no AppBar.

Long story short, sorry Shaurya - I can't help since it's still broken. :sad: