Hide fab when keyboard is shown

I have a fab button at the bottom of the page that I want to hide when the keyboard shows up. The default behavior moves the bottom up above the keyboard.

How can I do it, so that it doesn’t move and hides ‘behind’ the keyboard?

you just need to catch the keyboard open and close event by using the keyboard plugin.
and apply the css for fab display:none; when keyboard is open and remove css when keyboard is closed.

hope it’s work for you. :grinning:

1 Like

Thanks! I actually thought on the same idea, and try it. when they keyboard appears the even ‘keyboardWillShow’ works fantastically for the desired experience, nevertheless, in order to create a similarly good experience for the keyboard retraction neither keyboardWillHide nor keyboardDidHide, create the expected animation.

On the one hand, keyboardWillHide, displays the fab just before retracting the keyboard, thus, it creates a blurry fab button just before the keyboard is retracted, it feels like there is a ‘glitch’.

On the other hand, keyboardDidHide, waits until the keyboard is fully retracted to display back they fab button, thus, showing an empty space, until the keyboard fully disappears (and since the fab button, is ~mid way of the keyboard) creating a glitchy experience as well.

Ideally there would be a 3rd event, that will trigger after the keyboard retraction started.