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

Question

Hi guys 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).

Answer 1

Works for me.

document.body.style.height = (screen.availHeight - 100) + 'px';

Answer 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.

Answer 3

I think the issue here originates from Framework7.

document.body.style.height = window.outerHeight + 'px';

The above code placed in my index.js file worked like charm.

Answer 4

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.

Answer 5

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.