Ionic 5 keyboard still pushes my content up

Ionic Framework
1

i am using ionic 5, Everytime the keyboards come up, it pushes the content up thereby making it so packed together. How can i fix this please?

2

Check this: https://github.com/ionic-team/cordova-plugin-ionic-keyboard/blob/master/README.md

3

I have tried it out but it still did not work

4

I had the same problem. Fixed it with this : After the elements are mounted, take offsetHeight of the wrapper element. Later when user opens keyboard set height to wrapper element to that height. It seems like keyboard is shrinking wrapper element but htis fixes it and you can scroll through your content.

Make variable to store height of wrapper element. And do this in lifecycle hook
let clientHeight = ref();

onMounted(() => { clientHeight = document.querySelector('#wrapper').offsetHeight; })

After make listener for when keyboard is shown like this :

window.addEventListener("keyboardDidShow", () => { document.querySelector('#wrapper').style.height = `${clientHeight.value}px` });
5

I am having the same issue with my Ionic Capacitor app on Android

Ionic CLI : 6.16.3
Ionic Framework : @ionic/angular 5.8.0
@angular-devkit/build-angular : 0.901.15
@angular-devkit/schematics : 9.1.13
@angular/cli : 9.1.15

image
image1784Ă—955 98.8 KB

I have tried several suggested solutions from v3 and v4 including (but not limited to)

or things like

this.platform.keyboardDidShow.subscribe(() => {
this.content.scrollToPoint(0, 0, 0);
this.content.scrollToTop();
});

and/or

.scroll-content {

padding-bottom: 0 !important;

}

and/or

IonicModule.forRoot({
  scrollPadding: false,
  scrollAssist: false
}),

What sort of works is adding “adjustPan” to android manifest but I have other screens with more fields and this disables scrolling when the keyboard is open, so also not a good solution:

<activity android:name=".MainActivity" android:windowSoftInputMode="adjustPan">

Does anyone have a solution for this?

Thank you very much.

2 Likes