Phonegap KeyboardShrinksView and position fixed on iOS not applying correctly

cordova, ios, keyboard, webview

Solution

Yeah - this is a pain to deal with right now. Currently there is no real fix to make things like they used to be in iOS. Personally, I currently juggle two different tags in my apps (one for iOS and one for Android) and it gets close to the old behavior on iOS. Here's what I use:

<!-- IOS --> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />`
<!-- ANDROID --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />

My config.xml settings are what you'd expect:

<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="false" />

Here are a few links to keep an eye on and to keep bugging (i.e. requesting) that the Cordova folks finally fix it.

Issue CB-4862: https://issues.apache.org/jira/browse/CB-4862 (This is the core issue thread. It was originally closed but after a comment I made a while ago it was reopened)

Issue CB-5852: https://issues.apache.org/jira/browse/CB-5852 (This is where CB-4862 folks were told a possible fix might exist - but initial tests by devs show it's not really a solution sadly).

Hopefully these links will at least help get you up to date w/the latest info on the keyboardshrink related issues. If anyone else has leads/links on this please do share!

Problem

I use the 2.9.0 version of Phonegap and I want that when the keyboard appears my WebView shrinks like it's done in Android phonegap apps. I have footer and header elements in fixed position, and when the keyboard is open it causes trouble (the footer and header loose their fixed position state). I think the KeyboardShrinksView settings could fix that, according to the phonegap documentation : http://docs.phonegap.com/en/2.9.0rc1/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS But with a lot of try I'm not able to make it work, the WebView doesn't shrinks. I was thinking maybe it can come from a conflict between others preferences set on my config.xml : config.xml ``` <gap:platform name="ios" /> <gap:platform name="android" /> <preference name="fullscreen" value="false" /> <preference name="webviewbounce" value="false" /> <preference name="orientation" value="portrait" /> <preference name="KeyboardShrinksView" value="true" /> ``` Or maybe it can come from meta tag definition, specially the viewport : index.html ``` <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> ``` Do you know why it's not working ? Or do you have a workaround for this ? EDIT : I had seen that it changes something when KeyboardShrinksView=true, but when the keyboard is open, it's hidding the bottom of my content (including my footer and the field) instead of resizing my whole content. I expect it's placing my footer just at the top of the keyboard, am I right ? Thank you for your help

Original source