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.sstatic.net/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)

---

Dott

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

Dott

..and that is legacy again a year later : #21739896 – Gambia

Answer 2

For now you can add a:

document.body.scrollTop = 0;

whenever the input field recieves a blur event.

Contemporize

thanks zejesago, i tried this solution before but the page will appear moving up and down and it is annoying for users – Dott

@zejesago, it works.... thanks buddy. I was trying hard for this n ur solution worked!!! +1 for you! – Dickdicken

@zejesago, can we fix header while keyboard is open? here is my question with screenshots link – Dickdicken

@Dickdicken I'm not sure. It's been a while, since I used PhoneGap in a project. I've currently gone native. :) – Contemporize

@zejesago, the kind of issues m getting in hybrid frameworks, even m strongly thinking to move to native now!! – Dickdicken

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.

Turbidimeter

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

Dott

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 :( – Decretory

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

Toggery

hello steeve, I tried your solution, sometimes it is fixing the layout but the issue stay appearing (tested using PhoneGap 2.5) – Dott

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

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 

Menticide