CODEWITHSUNDEEP
ioscordovawebviewkeyboard
tomahim
tomahim

Reputation: 1328

Phonegap KeyboardShrinksView and position fixed on iOS not applying correctly

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

Upvotes: 17

Views: 13144

Answers (2)

Christopher
Christopher

Reputation: 2266

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.

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!

Upvotes: 4

Erhard Dinhobl
Erhard Dinhobl

Reputation: 1826

I fixed it by calling this code on every page change - :

    $('input').unbind('focusout');
    $(document).on('focusout', 'input', function() {
        setTimeout(function() {
            window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
        }, 500);
    });

Upvotes: 0

Related Questions