在键盘上隐藏页脚打开 Ionic3

Question

I'm trying to hide the footer of my Ionic 3 app when the keyboard is open,

i've followed the steps found on official documentation and also on this question's accepted answer: Hide tabs on keyboard open

I've correctly installed the keyboard plugin and imported it in app.module.ts, i have this code in app.component.ts:

this.platform.ready().then(() => {

  this.keyboard.onKeyboardShow().subscribe(() => {
        document.body.classList.add('keyboard-is-open');
    });

    this.keyboard.onKeyboardHide().subscribe(() => {
        document.body.classList.remove('keyboard-is-open');
    });


});

i've correctly set the css class :

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

and added this "hideElementOnKeyboardShown" class to the footer, what's happening now is that the footer disappears for few milliseconds (i guess the time that it takes for the keyboard to show up) and then reappears on top of the keyboard, partially hiding some input fields on the page.

I need to find a way to hide the footer, or just to keep it at the bottom of the page, covered by the keyboard (i've also tried with z-index but it isn't working)

Answer 1

Hi!

All you need to do is to add a {hidden} property on you ion-footer and set it according to a 'keyboard is open' method that returns true or false.

Example:

<ion-footer [hidden]="keyboard.isOpen()" no-border padding>
 //content
</ion-footer>

Answer 2

Component.html

<ion-footer [hidden]="isHideFooter"> ....</ion-footer>

Component.ts

isHideFooter:boolean = false;

ionViewWillEnter() {

  this.keyboard.onKeyboardShow().subscribe((result)=>{
    this.isHideFooter=true;
  })

  this.keyboard.onKeyboardHide().subscribe((result)=>{
    this.isHideFooter=false;
  })
}

Answer 3

In case your problem is that, footer is moving up when keyboard opens

So rather to hide the footer you can make use of

android:windowSoftInputMode="adjustPan"

put this line in your app/manifests/AndroidManifest.xml inside activity tag that contains your intentfilter action as 'MAIN' and category as 'LAUNCHER'

if this is your problem it will solve it!