Issues with Ionic 5 keyboard

Question

I am currently working on an Ionic 5 and I am facing 2 issues with the keyboard. When I click on the ion-input and the keyboard appears:

1. The ion-content is pushed up so it is right above the keyboard, which cause everything to be crammed . I tried a bunch of solutions, but none of them properly worked, and most of them involve android:windowSoftInputMode="adjustNothing" , which leaves the ion-content as it is, hence the ion-input is not visible and so the user can't see what they're typing and they also can't see the next button, so they must first close the keyboard in order to see what they wrote and be able to move on to the next step.

2. When the keyboard is about to dismiss, it leaves a white space in the space it was taking up . It's only for a split second but it is visible and makes the app feel like it's slow or lagging.

These 2 issues seem to be very common as I found questions about them since 2014, and I tried most solutions mentioned in the answers but nothing seems to work.

I seem to be having this issue in this app only , but I know that it is not an ionic 5 issue as people faced the same issue in older versions.

What the structure of the page looks like, I had to close all code blocks so that I could take one screenshot:

Answer 1

android:windowSoftInputMode is ised for native fields (EditText,etc..) so when you click on native xml it will take effect. All what you need to do is in your androidManefist.xml on line applicarion or activity, there is keyboardresize="adjustResize" which is the default, change it to adjustPan and content will not be pushed up, instead keyboard will go up as actionsheet from bottom without effecting the content.