CODEWITHSUNDEEP
angularionic-frameworkionic2
Aditya Kumar
Aditya Kumar

Reputation: 151

Hide footer when Keyboard Appears- IONIC2

I want to hide footer in Ionic2 when Keyboard Appears, i searched all the forum but didn't find the correct 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>

Upvotes: 7

Views: 5433

Answers (4)

H&#233;ctor Bordajandi
H&#233;ctor Bordajandi

Reputation: 390

@Und3rTow's answer is quite right, thank you. But a boolean is not really needed:

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

HTML:

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

You can even avoid that function too:

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

Upvotes: 5

marcovtwout
marcovtwout

Reputation: 5269

This is how I solved it for all screens, based on the answer by @Chizitere

  1. Install: https://ionicframework.com/docs/v2/native/keyboard/

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

  3. app.scss

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

Upvotes: -1

Chizitere
Chizitere

Reputation: 21

I had similar issues.

Now am not very certain which of the keyboard plugins I used but you can try this one: https://ionicframework.com/docs/v2/native/keyboard/

Ensure you first install the plugin, then in your app.scss file, add these lines:

 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;
}

Note: I had a class in the footer as class="applyFooter"

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

Upvotes: 2

Michael Doye
Michael Doye

Reputation: 8171

You should be able to use the ionic Keyboard API for this, more specifically, the isOpen() method - something along 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 may need to call resize() in order to tell the content to recalculate its dimensions when dynamically adding headers/footers.

Upvotes: 4

Related Questions