Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

267
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda