Hide bottom sticky when mobile keyboard slides up

mobile-prototyping

#1

Hi, is there a way to hide the a bottom sticky if they smartphone keyboard slides up ? Right now it gets pushed up by the keyboard and that looks stupid.

I hope somebody has an idea, I really need it for a presentation :disappointed_relieved:

Thx


#2

Can you show/hide based on the viewport size? I would think you could use a condition to say if the viewport is less than Xpx high, hide the bottom sticky.


#3

But there is no event that could trigger this case, is it?

PS: I have way too many text inputs otherwise I would set an onFocus and onLostFocus event, but it’s not reliable enough.


#4

Hi! If using OnFocus of your text fields to hide the pinned panel isn’t going to work for you, then varloo’s suggestion of showing and hiding the pinned panel based on the height of the viewport should help. In Axure RP, [[Window.height]] is a value that you can access via the “fx” dialog in several areas of the UI, such as the condition builder. If you set a condition that checks if [[Window.height]] is less than the height of your device, then you can hide the pinned panel whenever the keyboard shows and the window height shrinks. You can create a hidden “check” widget that loops through hiding and showing itself repeatedly to fire the condition that checks the window height and deals with the pinned panel accordingly.

2019-03-21_1740

Below I’ve attached a sample file that will hide the pinned panel when the keyboard is shown on a Pixel 2 XL device (where the reported viewport height is 691). You can check the viewport height for your target device by visiting https://viewportsizes.com/mine on your device and adjust the value in the condition so that the interaction is optimized for your test. Hopefully that helps a bit! Hide sticky widget.rp (54.1 KB)


closed #5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.