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. (http://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)

---

Answer 1

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

Answer 2

For now you can add a:

document.body.scrollTop = 0;

whenever the input field recieves a blur event.

Answer 3

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.

Answer 4

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

Answer 5

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;
  }
}

Answer 6

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