[DatePicker][TimePicker] are unusable on iPhone5/s
Closed this issue · 23 comments
The bottom of both controls gets cut off by the navigation bar. Repros on the examples on material-ui.com
This is even worse (if 'unusable' can be worsened :) on the iPhone 4 with its shorter display...
They merged #1266. Do this fix the issue for the date picker?
@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.
@mbrookes since this issue has been resolved, closing this. If the problem with Safari still persists, feel free to open a new one.
@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.
I am on 0.13.1 and I still have the exact same issue using Chrome Dev tool Iphone4 settings.
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:
I have a different set of problems pertaining to this ticket which make the Date and Time Selectors even less usable.
For the Date Picker, only the first row or 2 are showing up on an iPhone 5 with iOS 9.1. Verified same results in both the emulator and on actual device:
Similarly, on the Time Picker, on an iPhone 5 with iOS 9.1. Verified same results in both the emulator and on actual device, we only get half of a clock:
This seems to render correctly on all of the other newer devices (6 and up).
@newoga This looks like a good contender for our first webdriver+selenium test, acceptance testing ftw.
The Portrait version of both TimePicker and DatePicker should work fine now.
I have just checked on the master branch. I'm still seeing this issue.
Still, I would close it in favor of the issues related to the vertical centering of the dialog.
Has anyone come up with a temporary solution for this? I tried to hack the margin-top but the dialog height is simply too tall for an iphone5. Anything more than this would surely violate some md guideline... In the meantime, I guess I'm switching my date pickers to plain old SelectField.
I've run into this as well, if anyone has a workable solution it would be much appreciated.
I've been giving it some thought (see above), and I don't think there is any way around this that is not against the material design spec. Any approach you take has problems:
- scaling the whole thing down to fit the viewport makes distances and sizing inconsistent with the spec and the rest of the application
- changing things like margins and paddings has the same problem
- just repositioning it looks pretty terrible (see screenshot above) and is not guaranteed to work on other smaller phones with slightly different resolutions (but this is probably your best bet if you're trying to hack something together)
- the only thing i can think of is maybe adding an option to get rid of the cancel button. autoOk gets rid of the OK button and you can set it up that clicking/tapping outside of the picker is an autoCancel - that will buy you some vertical space... but even then you're not guaranteed it will fit other smaller phones besides iphone5. And I am pretty sure having an implied cancel is also against the material design spec.
I'm also having this issue. Right now I can't find a selector (class name or ref) to at least hack the dialog position.
I see that the dead-space at the top is set here https://github.com/callemall/material-ui/blob/master/src/Dialog/Dialog.js#L42 and without it the dialog is not centered correctly on desktop, but I don't really understand its logic.
Is the issue handled in v1?
I'm also having this issue in Iphone6...
@alancasagrande try change (-50 in my case) the dialogContainerStyle attr from component. Similar this:
<DatePicker
dialogContainerStyle={{margin: '-50 auto'}}
... others attr...
/>
Hope it helps!
Closing for #4787
Is there any solution for this? Please help
@anilljoshi
@media (max-height: 568px) {
div[style $='transform: translate(0px, 64px);'] {
transform: translateY(0) !important;
}
}It looks like not professional, but it works 😃