I have a page with some input fileds. When I tap on an input field it scrolls up so the keyboard does not hide the input field. But the scrolled up page content overlaps than with the device status bar. I’ve seen this on serveral IOS devices but not in Web or Android. Please have a look at the attached screenshots.
I’m using Ionic/Angular 7.1.2. The IOS versions are 16.x.
I’ve search the net for hours but did not find any related topics.
Are you using Cordova or Capacitor?
The keyboard plugins should prevent that behavior.
Hi,
thanks for the quick reply.
I’m using Capacitor, but not the keyboard plugin. Should I?
"@capacitor/android": "5.1.1",
"@capacitor/app": "5.0.5",
"@capacitor/camera": "5.0.5",
"@capacitor/core": "5.1.1",
"@capacitor/device": "5.0.5",
"@capacitor/ios": "5.1.1",
"@capacitor/network": "5.0.5",
"@capacitor/preferences": "5.0.5",
"@capacitor/push-notifications": "^5.0.5",
"@capacitor/splash-screen": "5.0.5",
That’s the default WebView behaviour when focusing fields, if you install @capacitor/keyboard plugin it removes that behavior, but introduces different behaviors that some people don’t like.
So if you don’t like that behavior, give @capacitor/keyboard a try, make sure you try all the resize modes if you don’t like the default (called native) behavior.
Thank you, it worked for me with resize=body.