Capacitor: The keyboard in iOS pushes up the application

Created on 9 Jun 2018  ·  6Comments  ·  Source: ionic-team/capacitor

When the keyboard is opened in IOS, the application is pushed up.
How can I get it to shrink?

Most helpful comment

The webview. Currently, it is "shifted up", but it keeps its full height, making it impossible in CSS to adjust elements to fit the reduced height. It should shrink the webview so its inner size is the available screen size, instead of the full one. This is already the current behavior in Android.

All 6 comments

What should shrink - the application?

The webview. Currently, it is "shifted up", but it keeps its full height, making it impossible in CSS to adjust elements to fit the reduced height. It should shrink the webview so its inner size is the available screen size, instead of the full one. This is already the current behavior in Android.

Any update on this? It's very distracting if you have a tab selector at the bottom of the screen

If I remember correctly, there used to issues around this in Cordova too.

I think the way modern iOS and Android behaves is that the webview is shrunk when the keyboard appears. I guess this would make most sense for Capacitor too.

Another question is whether it should scroll, and if so where (the top, the bottom, a focused element, etc).

Some related discussions:

This is a bit of a blocker for us. I'm happy to look at fixing it, but I'm not sure if this is defined behaviour that we should be working around in our app, or if this is a bug that should be fixed in Capacitor. Can anyone from the team speak to what the intended implementation is? I'm guessing this is a bug because it doesn't align with behaviour on Android.

Keyboard resize has been implemented on https://github.com/ionic-team/capacitor/pull/1119
And documented on https://github.com/ionic-team/capacitor/pull/1149

I think what you want is "native" resize option as it resizes the full webview

Was this page helpful?
0 / 5 - 0 ratings