CODEWITHSUNDEEP
javascriptjqueryioshtmlcordova
Alex
Alex

Reputation: 565

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

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.

Upvotes: 8

Views: 14697

Answers (5)

Patrick Ogbuitepu
Patrick Ogbuitepu

Reputation: 11

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.

Upvotes: 0

Juan Lombana
Juan Lombana

Reputation: 1

Works for me.

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

Upvotes: 0

andypaxo
andypaxo

Reputation: 6641

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.

Upvotes: 5

Alex
Alex

Reputation: 565

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.

Upvotes: 3

Siddhartha Gupta
Siddhartha Gupta

Reputation: 1158

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.

Upvotes: 2

Related Questions