Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

266
Views
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>
about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

@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>
about 4 years ago · Santiago Trujillo Report

0

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.

about 4 years ago · Santiago Trujillo Report

0

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>
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!