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.

Look at [this answer](http://stackoverflow.com/a/18991076/503545). It fixed it for me. — tkh44, Oct 09 '13 at 20:48
Great answer! Thanks for sharing and it does the work automatically for the keyboard but unfortunately my fixed header gets hidden (it's not fixed anymore and scrolls with the view). Any solution for this part? Cheers — Alex, Oct 09 '13 at 22:58

score 5 · Accepted Answer · answered Jan 23 '14 at 18:18

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.

answered Jan 23 '14 at 18:18

andypaxo

6,171
3
38
53

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: https://gist.github.com/shazron/6602131 and all ran smoothly after. – ug_ Feb 14 '14 at 22:54
This is genius. I have no idea why it works either but it really does work! Thanks! – howard10 Feb 25 '14 at 09:45

score 3 · Answer 2 · edited Nov 21 '13 at 07:34

3

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.

edited Nov 21 '13 at 07:34

Anas Azeem

2,820
3
24
37

answered Oct 08 '13 at 12:36

Alex

565
2
6
17

Well I haven't tried it personally, but read somewhere that scrollTo doesn't work with safari in iOS7. – Siddhartha Gupta Oct 10 '13 at 13:32
2

Works perfectly for me :) – Alex Oct 10 '13 at 23:15
@Alex: Please provide some more details on how to use this? – Anas Azeem Nov 21 '13 at 07:50
Yes please, provide more details, i really need it:( – elledienne Nov 24 '13 at 21:21
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. – Alex Jan 13 '14 at 13:31

score 2 · Answer 3 · answered Oct 08 '13 at 05:31

2

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.

answered Oct 08 '13 at 05:31

Siddhartha Gupta

1,140
8
13

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. – Alex Oct 08 '13 at 10:42

score 0 · Answer 4 · answered Jun 23 '15 at 23:44

0

Works for me.

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

answered Jun 23 '15 at 23:44

Juan Lombana

1
1
3

score 0 · Answer 5 · edited Dec 24 '17 at 17:48

0

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.

edited Dec 24 '17 at 17:48

Stephen Rauch

47,830
31
106
135

answered Dec 24 '17 at 17:28

Patrick Ogbuitepu

11
1
1
4

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

5 Answers5

Linked