Search code examples
iphoneioscordovalayoutiphone-softkeyboard

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


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)



Solution

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