PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted

Question

I am trying to develop a chatting application using PhoneGap for iOS devices. The application has a header that shows the logged user, a footer where user can write his text message, and a list view placed in the body which will display messages.

I updated to the latest version of JQueryMobile (1.3.0) but the issue still appearing inside the application. I have attached a snapshot shows how the layout becomes corrupted. (https://i.stack.imgur.com/RsLfT.png)

I tried several solutions like making the page not scrollable (set UIWebViewBounce to false) and not scalable (user-scalable=no) and other user interface changes, but the issue is not solved.

Does anyone have an idea how to fix this? (like a refresh after soft keyboard appearance)

score 4 · Accepted Answer · answered Apr 18 '13 at 12:46

4

In order to fix this Issue temporarily (because it shows breaks while keyboard is showing), you can set "KeyboardShrinksView" to "true" in your configuration file (config.xml) or add it:

<widget>
  ...
  <preference name="KeyboardShrinksView" value="true" />

  <plugins>...

answered Apr 18 '13 at 12:46

a.karkar

141
1
7

..and that is legacy again a year later : http://stackoverflow.com/questions/21739396/phonegap-3-3-ios-keyboardshrinksview – commonpike Dec 11 '14 at 23:26

score 2 · Answer 2 · answered Mar 06 '13 at 11:03

2

For now you can add a:

document.body.scrollTop = 0;

whenever the input field recieves a blur event.

answered Mar 06 '13 at 11:03

zgosalvez

384
1
5
22

thanks zejesago, i tried this solution before but the page will appear moving up and down and it is annoying for users – a.karkar Mar 25 '13 at 13:04
@zejesago, it works.... thanks buddy. I was trying hard for this n ur solution worked!!! +1 for you! – Sushant Jun 24 '14 at 06:49
@zejesago, can we fix header while keyboard is open? here is my question with screenshots [link](http://stackoverflow.com/questions/24378587/iphone-keyboard-pushes-page-up-in-phonegap) – Sushant Jun 24 '14 at 06:57
@Sushant I'm not sure. It's been a while, since I used PhoneGap in a project. I've currently gone native. :) – zgosalvez Jul 20 '14 at 09:34
@zejesago, the kind of issues m getting in hybrid frameworks, even m strongly thinking to move to native now!! – Sushant Jul 20 '14 at 12:08

score 2 · Answer 3 · edited Dec 17 '13 at 19:03

2

I was having the same issue using twitter bootstrap 3.

Adding:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Solved the problem for me.

edited Dec 17 '13 at 19:03

Chris Seymour

83,387
30
160
202

answered Sep 19 '13 at 12:24

joshua

4,118
3
40
53

score 1 · Answer 4 · answered Feb 28 '13 at 06:25

1

I have contacted PhoneGap Support and they informed that a proper fix is expected to be done in PhoneGap 2.6 release concerning this issue

answered Feb 28 '13 at 06:25

a.karkar

141
1
7

1

As far as I understand the problem is when keyboard appears then page is scrollable AND there is an additional space (about 40px height) appended to the end of the page. If it's true so it still exists in PG 3.0 :( – Tien Do Sep 11 '13 at 17:20

score 1 · Answer 5 · answered Mar 24 '13 at 23:27

1

I fixed it using css and a wrapper

/*Phone < 5:*/
 @media screen and (device-aspect-ratio: 2/3) {
  .content {
   height: 416px !important;
 }
}

 /*iPhone 5:*/
@media screen and (device-aspect-ratio: 40/71) {
  .content {
    height: 504px !important;
  }
}

answered Mar 24 '13 at 23:27

Steeve17

492
6
19

hello steeve, I tried your solution, sometimes it is fixing the layout but the issue stay appearing (tested using PhoneGap 2.5) – a.karkar Mar 25 '13 at 13:03
In my case it has fixed completely since nothing relies on window height, its all about the container.No doubt this is a native bug but there is no other solution out there atm. – Steeve17 Mar 25 '13 at 16:16

Anulal S · Answer 6 · 2015-12-10T06:47:27.493

Screen Height changes when keyboard pops up

The cordova/phonegap application screen height or window.innerHeight value is getting reduced when the keyboard pops up, this re-sizes the contents inside & makes your screen look corrupted.

Using Javascript, On deviceready or Application initialize set the device screen height to your wrapper/container element.

 $('#container').height(window.innerHeight);  // jQuery

PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted

6 Answers6

Linked