Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

268
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda