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.