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

276
Vistas
ionic 2 keyboard pushes header out of screen on ios

I have a simple chat interface but when i focus the input textarea, the keyboard pushes everything up, including the header. Also the topmost contents of the content area hidden and i can't scroll up to them.

This is only for ios.

<ion-header></ion-header>
<ion-content>
  Chat Title...
  Chat Messages...
</ion-content>
<ion-footer>
   <ion-card class="chat-input">
        <textarea appAutoresize class="chat-input-textarea" rows="1" [(ngModel)]="input" placeholder="Ihre Nachricht"></textarea>
    </ion-card>
</ion-footer>
over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

The problem seems to be caused by deprecated ionic-plugin-keyboard. Remove that plugin and use cordova-plugin-ionic-keyboard instead.

Be aware that @ionic-native/keyboard does not seem to currently work with cordova-plugin-ionic-keyboard, so you may want to use these workarounds if you need to access the keyboard plugin in code (you don't need to thought in order to fix the issue in this question): https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-369568584 https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-372593829

over 4 years ago · Santiago Trujillo Denunciar

0

I had this issue on iPhoneX and after trying a few different work arounds, I found adding an eventListener to the javaScript file solved it.

Make sure you have the ionic-plugin-keyboard installed in your project

document.addEventListener('deviceready', function(e){
    window.addEventListener('native.keyboardshow', function () {
        cordova.plugins.Keyboard.disableScroll(true);
    });
});
over 4 years ago · Santiago Trujillo Denunciar

0

after long research and reading that this issue is still open in cordova/ionic, I decided to solve the issue by myself. The idea is to adapt the header's height programmatically depending on the keyboard's height.

1.- On the header of the view template (HTML) attach a style directive:

<ion-header [ngStyle]="getKeyboardStyle()" >

2.- On the component (TS) I triggering the keyboard's events (show, hide) and the height value:

  Observable.merge(this.nativeKeyboard.onKeyboardShow(), this.keyboard.didShow)
    .subscribe((e: any) => {
      this.keyboardHeight = e.keyboardHeight;
    });

 Observable.merge(this.nativeKeyboard.onKeyboardHide(), this.keyboard.didHide)
    .subscribe((e: any) => {
      this.keyboardHeight = e.keyboardHeight | 0;
    });
}

Where this.keyboardHeight is a global variable number type. And this.keybaord and this.nativeKeyboard are the cordova plugins.

3.- Finally, this is the method returning the height attached to the ngStyle directive of the header:

  getKeyboardStyle() {
  let style = {
    'top': this.keyboardHeight ? this.keyboardHeight + 'px' : '0px'
  }
  return style;

I hope that this can help.

over 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