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