Ionic Android keyboard resize vh and shrink content

Ionic Framework
1

I am trying to develop a responsive app where vh unit is used for ion-input height, margin and etc. However, the entire view will be shrink whenever the keyboard is showed up.

After adding the preference below, this issue is solved but only in iOS.

<preference name="KeyboardResizeMode" value="ionic" />

After changing android:windowSoftInputMode from adjustResize to adjustPan, vh remain unchange but keyboard overlay on the ion-input and unable to scroll.

android:windowSoftInputMode="adjustPan"

Approaches that I’ve tried but no luck:

.scroll-content {
    padding-bottom: 0 !important;
}

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

Ref:
https://stackoverflow.com/questions/39503996/how-to-keep-layout-unchanged-when-keyboard-is-displayed/39505246

https://stackoverflow.com/questions/52804428/ionic-3-keyboard-pushes-content-up-and-over-other-content-with-no-reason

2

What i did to solve this kind of issue for Android. iOS works for me as well

Installed the Keyboard capacitor plugin which allows us to observe Keyboard changes for Android.

import { Keyboard } from '@capacitor/keyboard';

In Component get the container element in which your input is wrapped, e.G. with ViewChild.

Attach Listener KeyboardWillShow and KeyboardWillHide

Be careful as there is a bug with Keyboard listener which will not fire if for example
android:windowSoftInputMode="adjustNothing" is set

But as you mentioned android:windowSoftInputMode=“adjustPan” will do the trick

Then we set margin to our container in the height of the keyboard to adjust the total height of container.
To have a smooth transiiton we get our inputElement and call scrollIntoView with smooth behaviour.
Additionally you can do some block: “center” | “end” if you want to have the element in some other position on the screen. I used the default “start”.

Example Code:

  @ViewChild('container', { static: false }) container: ElementRef;


     Keyboard.addListener('keyboardWillShow', (info) => {
        this.container.nativeElement.style.marginBottom =
          info.keyboardHeight + 'px';

        document
          .getElementById('yourInputElement')
          .scrollIntoView({ behavior: 'smooth' });
      });

      Keyboard.addListener('keyboardWillHide', () => {
        this.container.nativeElement.style.marginBottom = 0;
      });

Hope this helps someone :innocent: