Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7

Question

I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).

Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.

When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.

Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).

Playing with the "fullscreen" preference won't solve the problem.

Solution 1

Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.

Viewport meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />

JavaScript run after load:

document.body.style.height = screen.availHeight + 'px';

And that's it. Works on iOS 7 and I have no idea why.

Solution 2

Finally fixed the problem with the help of the following plugin: jQuery scrollTo plugin

Whenever i'm focusing on an element i'm triggering a focus event which does the following calculations and updates the scroll position:

updateScroll: function(e){
    var el = $(e.currentTarget);
    var offset = -$(".scrollerWrap").height() + $(el).height();
    $(".scrollerWrap").scrollTo(el,{offset: offset});
}

Sticks the bottom of the input/textarea to the top of the keyboard. Works like a charm, even if the solution needs to go through that bit of JavaScript.

Solution 3

Well, logically the view should move up when the keyboard opens. I have faced a similar issue with iOS7 and to fix it I have applied few css tweaks.

Tweaks were applied on the wrapper class/id which is containing the content of the app.

position: relative;
overflow: hidden;
height: 460px;
width: 320px;

Note - Height and width are judged dynamically depending on the device height and width

height = window.innerHeight
width = window.innerWidth

By using jQuery selectors height and width are appended to wrapping class/id.

Comments

[Alex]

Thanks for your help.I checked for my wrapper class height and it is changing whether the keyboard is displayed or not but the content is not "scrolled to" the focused input/textarea, thus having to scroll myself in order to view it. I'm still testing some other stuff in javascript, i'll let you know of the outcome.

[Siddhartha Gupta]

Well I haven't tried it personally, but read somewhere that scrollTo doesn't work with safari in iOS7.

[Alex]

Works perfectly for me :)

[Anas Azeem]

@Alex: Please provide some more details on how to use this?

[elledienne]

Yes please, provide more details, i really need it:(

[Alex]

Start by attaching a JS handler that will call the updateScroll function. el = the textarea you have clicked on. The scrollerWrap class is attached to the wrapper div of scrollable content. The value of the offset variable is equal to the top height of the page minus the size of the textarea (it can vary if you're using plugins such as elastictxt.js). It allows to set the textarea at a comfortable position to the user. Let me know if you need any other details.

[ug_]

This worked perfect for me. I was having other issues with the keyboard that required me to set height=device-height in viewport meta causing the body height(100%) to take into account the topbar. I combined your code with the code at: gist.github.com/shazron/6602131 and all ran smoothly after.

[howard10]

This is genius. I have no idea why it works either but it really does work! Thanks!