Pushing ion-content contents up when keyboard opens


#1

I have a messaging app whose code structure is in this sequence -

<ion-header>
  <!-- normal header icons/buttons -->
  <ion-toolbar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <!-- messages holders elements -->
</ion-content>
<ion-footer>
  <ion-input><!-- For submitting message --></ion-input>
</ion-footer>

This is layout without keyboard opened -

default

This is how it looks when keyboard opens(after clicking on input text field) -

Keyboard-opened

It pushes the text field up and hides latest conversation. I am planning it to be like WhatsApp’s keyboard behavior.
It should push text field up(which is correct) and it should also resize the ion-content part to keep the view on the same element/conversation as it was without the keyboard.

Replication of this behavior - Ionic conference app.

I believe that solution with (android:windowSoftInputMode=“adjustPan”) can work, but that requires overriding many default behavior in iOS and Android.

Has anyone came up with a better solution? Do I need custom listeners to scroll messages to keep the view same?
I have tried ion-content resize.