How to keep the footer above the keyboard

ionic-v1
1

Hi there!

I’ve been working on an app recently and I’m trying Ionic to see how it goes.

I’m facing that when the virtual keyboard is opened, the footer remains at the bottom, so it’s no longer visible. I want the footer to ve visible at all times.

The weird part is that researching on Internet doesn’t bring any light since most people wants to avoid this behaviour. I’ve read about the fix you do on Android devices in which the footer get’s hidden but this is something different?

Do you have any hints?

1 Like
2

Which device are you running this on?

I am only aware of this being possible in Cordova + BlackBerry 10. The com.blackberry.app plugin allows you to detect the keyboardOpened event (when the virtual keyboard is opened): https://developer.blackberry.com/html5/apis/v2_0/blackberry.app.html

You can create an event listener that applies a CSS transformation to the footer element.

3

See if these posts help at all:

4

There is a similar topic on github: https://github.com/driftyco/ionic/issues/1064

5

I’m circumventing this right now with this:

.keyboard-open {
  .bar-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;

    // iPhone 5
    @media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) { bottom: 216px; }

    // iPhone 4
    @media screen and (device-aspect-ratio: 2/3) and (-webkit-min-device-pixel-ratio: 2) { bottom: 216px; }
  }
}
6

For the shake of completion. The current ionic way of doing this is using the new keyboard-attach directive.
http://ionicframework.com/docs/api/directive/keyboardAttach/

2 Likes