CODEWITHSUNDEEP
androidhtmlioscsscordova
Esselans
Esselans

Reputation: 1546

Phonegap - iOS Keyboard and Dropdown 'compress' webview because of vh unit

With an ionic/phonegap application I've this issue (Only on iOS).

When the user need to write something o select and option the iOS control (keyboard or dropdown) appears and when it does the web-view is compress to half. I'm using vh and vw measure unit in CSS.

What I've done/tried:

This post in ionic's forum The OP solved it by changing vh and vw units back to pixels. That's no a solution for me.

Ionic keyboard plugin using the method cordova.plugins.Keyboard.disableScroll(true); didn't work. Tried with false and true.

Add parameters to the meta tag Non working. My current meta:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Image when keyboard is hidden:

When keyboard is hidden

Image when keyboard is shown:

When keyboard is shown

On the 2nd image you can barely read left text - right text because the height for the input is 24vh.

I create a dummy page where I do not use vh and vw and this works ok. On Android works fine too. It seems that when de keyboard or dropdown comes up the height of viewport is resize and vh size adapts to it.

Since I can't change it to px I'm looking for other alternatives

Upvotes: 1

Views: 1286

Answers (1)

Giri
Giri

Reputation: 565

The parent container(s) that holds the input element cannot contain height:100% or 100vh on iOS if thats what you are trying to do. I had this similar issue on iOS timepicker reducing the screen size and showing blank just like yours.

This usually happens if the keyboard height is half compared to the screen height of iOS device. On larger screens like iPhone 6, this issue doesn't happen.

I used min-height:480px and height:100vh on the same container that gets resized. It fixed my issue on the smaller devices.

This cordova.plugins.Keyboard.disableScroll(true); is not required.

Let me know if this works for you.

Upvotes: 2

Related Questions