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 -
This is how it looks when keyboard opens(after clicking on input text field) -
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.