In my application I use the top bar for the main navigation and the bottom bar for shortcuts. This approach serves me well on most cases and the css code to anchor top and bottom bars is quite simple.

However, when the virtual keyboard shows up, it also pushes the bottom bar with it.

Besides using css tricks, how could I deal with this situation?

  • Make every input a full pop-up?
  • Give up the bottom bar?
  • Adopt fab buttons?

I would be glad to hear observations about the above approaches or other strategies.

  • 2
    Couple of questions, how many shortcuts are we talking about, can you post a screenshot of one of your apps ?
    – Keno
    Oct 20 '16 at 3:50

The easiest thing to do is to add a keyboard event handler that hides the bottom bar when the keyboard appears, and shows the bottom bar again when the keyboard goes away.

It's also better if the keyboard loads on top of the content, rather than pushing it up the screen.

window.addEventListener('native.keyboardshow', app.keyboardShowHandler);
window.addEventListener('native.keyboardhide', app.keyboardHideHandler);

// If a virtual keyboard appears then hide any fixed footer
    keyboardShowHandler: function (e) {

    // If a virtual keyboard disappears then restore any fixed footer
    keyboardHideHandler: function (e) {
  • 1
    Have to agree that this is the best approach to the problem the OP is facing. The most important thing point of this approach is that the user is not focussing on unnecessary elements on the screen when they are typing and of course dismissing the keyboard brings back the experience you want them to have.What does need answering though is how important your shortcuts are and what they do on the bottom bar? That could change the way the keyboard approach is handled. May 31 '17 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.