Hide footer when keyboard appears - IONIC2

Question

I want to hide the footer in Ionic2, when the keyboard appears, I searched the entire forum but did not find the right solution.

Here is my footer -

<ion-footer>
  <div class="footer1" >
      <p>You don't have account? <span [navPush]="pushPage"> Register here</span></p>
  </div>
</ion-footer>

Answer 1

You should be able to use the ionic keyboard API , in particular the method isOpen()- something like these lines should work:

export class MyClass {

  showFooter: boolean = true;

  constructor(public keyboard: Keyboard) {

  }

  keyboardCheck() {
    if (this.keyboard.isOpen()) {
        // You logic goes here
        this.showFooter = false;
    }
  }
}

and in your HTML you can use ngIf:

<ion-footer *ngIf="showFooter">
  <div class="footer1" >
      <p>You don't have account? <span [navPush]="pushPage"> Register here</span></p>
  </div>
</ion-footer>

---

Thanks to @sebaferreras for pointing out that you might need to call to let the content recount its sizes when adding headers and footers dynamically. resize()

Answer 2

.

, , : https://ionicframework.com/docs/v2/native/keyboard/

, , app.scss :

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

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

body.keyboard-is-open .applyFooter{
        display: none;
        bottom: 0;
}

. class= "applyFooter"

<ion-footer class="applyFooter">
</ion-footer>

Answer 3

@ Und3rTow , . :

keyboardCheck() {
 return !this.keyboard.isOpen();
}

HTML:

<ion-footer *ngIf="keyboardCheck()">
 ...
</ion-footer>

:

<ion-footer *ngIf="!keyboard.isOpen()">
 ...
</ion-footer>

Answer 4

, @Chizitere

• : https://ionicframework.com/docs/v2/native/keyboard/

• 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');
    });
  });
  

• app.scss

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