paper toast hides behind ios key board. about paper-toast HOT 6 CLOSED

Hi @sounakpal, what do you mean by

People using form actions with paper-toast can break in I-Phone safari.

Could you provide a simplified jsbin showing the issue? Here a tentative to show & fix the issue in case you want to keep the toast on the bottom of the screen http://jsbin.com/layeno/4/edit?html,output
Since ios doesn't provide a way to know if the keyboard is visible or not, we can listen to the focus/blur events and modify the toast margin-bottom accordingly; the ios keyboard will have different heights according to the orientation, I let you find the right values for those :)

from paper-toast.

Hi @valdrinkoshi I mean if anyone try to open a toast on key press in Iphone safari the toast will not be visible. Form actions mentioned in the previous post was incorrect.Check a live example. Try putting an email and focusout. I would not use the margin top because sizes of the keyboard might change according to phone. And orientation is also an extra handling.
Why not toast having an option to open from top for such cases. Is it hampering any design idea?

from paper-toast.

Hi @sounakpal, tried the live demo and I just get a spinner

from paper-toast.

The Material Design specs want the paper-toast on the bottom edge of the screen, and should not block the input. The platform doesn't provide a way to know if the virtual keyboard is visible or how big it is in height :/
(check this http://jsbin.com/nixoni/3/edit?html,output, try it from the phone http://jsbin.com/nixoni/3/ )

Having it positioned to the top will require also updating the animation config, and the center method.
Since paper-toast extends iron-overlay-behavior, and the latter extends iron-fit-behavior, I would suggest this feature to be added to iron-fit-behavior, where we could have 2 properties horizontal-position (left, center, right) and vertical-position (top, middle, bottom). Like this, you would be able to do

<paper-toast horizontal-position="left" vertical-position="top"></paper-toast>

If you feel like it, feel free to create 2 PRs to address this :)

from paper-toast.

I am sorry, We had to remove the usage of paper-toast in the link. Yes the example shows the behavior of the platform. Thanks for sharing the approach I will try to send you the PRs as soon as I get some time to work on them :)

from paper-toast.

@sounakpal sounds good, I've created an issue on iron-fit-behavior to address this new property PolymerElements/iron-fit-behavior#36

from paper-toast.