ionic 2 keyboard pushes header out of screen on ios

keyboard pushes the whole screen up ios
ionic 3 keyboard push content up
ionic 4 keyboard push content up
ionic prevent keyboard from pushing content
keyboard.disablescroll(true) ionic 3
ios keyboard push content up
ionic keyboard pushes footer
ionic keyboard push content up

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>

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.

bug: Keyboard pushes the whole screen up · Issue #5432 · ionic , Type: bug Ionic Version: 2.x Platform: ios 9 webview My code has a with a text input inside of it. bug: Keyboard pushes the whole screen up #5432 want some content pushed out of the way of the native keyboard by ionic  Ionic Version: 2.x. Platform: ios 9 webview. My code has a <ion-toolbar position="bottom"> with a text input inside of it. When I try to type something in there on iOS the whole page gets pushed upwards by the keyboard.

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

Keyboard pushes elements out of top of view? - ionic-v3, The ideal would be that the content isn't pushed off screen. If the content of your app (including the header) is being pushed up and out of view on input focus, try setting cordova.plugins. Is there an alternative or workaround for Ionic 2? Prevent keyboard pushing view in Ionic and MKWebVIew in iOS. Footer have an ion-textarea and a SEND button inside. When we focus inside textarea, the keyboard comes up ,the footer float above the keyboard , also the header goes up out of the screen . But if i set "this.keyboard.disableScroll(true) " , the keyboard comes up hiding the footer beneath, that's prevent the header goes up out of the screen.

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

keyboard - Page in module ionic, keyboard. On both Android and iOS, Ionic will attempt to prevent the keyboard which can cause layout issues such as pushing headers up and out of view. same problem for me. Thanks to @brunomrpx it works now, but last grid row still can't really show up, even if everything is pushed up, there would need a few pixels more. . Thanks a lot for your answer, with some padding added at the bottom of the ion-grid (for the last row with inputs to show up), it finally worked fine on every row for me, good solution meanwhile, even if adding padding

Ionic 3 keyboard pushes content up, Ionic 3 keyboard pushes content up. Chinese keyboard. navigation bar won't scroll out when keyboard is shown) ios 9. 2. sub. Ionic 1 was built with Angular 1. As the title says, the keyboard pushes content out of view when first opened per view. > ionic plugin ls. ionic-plugin-keyboard 1.0.8 "Keyboard" > ionic info

cordova-plugin-keyboard, Cordova Keyboard Plugin. 1.2.0 • Public • Published 2 years ago. Readme · ExploreBETA · 0 preference values are always false, and only use the API functions to turn things on/off. This event fires before keyboard will be shown. window. Make compatible with cordova-android 3 and 4 (See #2); Add hide for iOS. Allow Ionic2 keyboard to open without pushing or scrolling content - app.ts to open without pushing or scrolling content ionic-keyboard: 2.1.3. Kindly help me

How to set footer fixed at bottom even if virtual keyboard is open , Now footer coming to center of screen if keyboard is there. This is difficult to impossible to fix on certain versions of iOS for websites or make transparent a fixed header when a virtual keyboard appears, ="http://code.jquery.com/mobile/​1.4.2/jquery.mobile-1.4.2.min.css"> [ionic-plugins-keyboard][1]. iOS Notes If the content of your app (including the header) is being pushed up and out of view on input focus, try setting cordova.plugins.Keyboard.disableScroll(true). This does not disable scrolling in the Ionic scroll view, rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.

Comments
  • Did you solve this issue? I can still reproduce it.
  • nope, still not solved...