Hide footer on keyboard open android

Ionic Framework ionic-v3
1

I see lots of topics about attaching the footer to the IOS keyboard, but I cannot find anything about hiding the footer on android when the keyboard opens.

Is there an easy fix for this? I don’t want the footer sticking to the keyboard.

Cheers

2

anyone know how to do this?

3

Still trying to find an answer for this if anyone could help.

4

hello ,

i think there’s no ready feature to do that in ionic 2 right now , but you can do it yourself

you can do general code to add class when keyboard open and remove it when close like this:

     platform.ready().then(() => {
        Keyboard.onKeyboardShow().subscribe(() => {
            document.body.classList.add('keyboard-is-open');
        });
        Keyboard.onKeyboardHide().subscribe(() => {
            document.body.classList.remove('keyboard-is-open');
        });
     });

And then make special class to use it to hide some thing when keyboard open like this:

<ion-footer class="hide-on-keyboard-open">
   ....
</ion-footer>

And at the end you should put this general css to hide the element like this:

body.keyboard-is-open .hide-on-keyboard-open {
  display: none;
}

body.keyboard-is-open .scroll-content {
  margin-bottom: 0 !important;
}
5

Or actually you can simply add ngIf to the footer to check if the keyboard is open and then calling resize content because when you call resize the content will notify that there’s footer or not and recalculate the margins

So it will be like this :

<ion-footer *ngIf="isKeyboardHide">
   .....
</ion-footer>

And in your page controller add the following:

Keyboard.onKeyboardShow().subscribe(() => {
   this.isKeyboardHide = false;
   setTimeout(() => { // this to make sure that angular's cycle performed and the footer removed from the DOM before resizing
      this.content.resize();
   }, 100);
});

Keyboard.onKeyboardHide().subscribe(() => {
   this.isKeyboardHide = true;
   setTimeout(() => { // this to make sure that angular's cycle performed and the footer removed from the DOM before resizing
      this.content.resize();
   }, 100);
});
4 Likes
6

This worked for me. Thanks!

7

hey how did you make this work? I have an input bar where user types in the messages but when keyboard appears it is hidden, any ideas how I can fix this ?