PhoneGap / JQuery Mobile - Page style breaking when keyboard is visible

Question

I have an application built with Phonegap and JQuery Mobile. Whenever the soft keyboard shows - on form inputs etc - the whole page resizes. Images, buttons and text. Which I'm assuming is something breaking the CSS?

Anyone else had this problem, or know why it might be occurring? I'm having to restart the application to reset the layout.

Any ideas appreciated!

Thanks!

Answer 1

I found the answers here:

http://solutions.michaelbrooks.ca/2011/07/05/android-soft-keyboard-resizes-web-view/

http://comments.gmane.org/gmane.comp.handhelds.phonegap/10207

A combination of adding:

android:windowSoftInputMode="adjustPan"

to AndroidManifest.xml

and <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

to index.html, did the job for me.

Hope this helps someone.

Answer 2

For Phonegap Build users, there's a wrapping preference available in config.xml file, the

<preference name="android-windowSoftInputMode" value="stateHidden|adjustPan" />

The values it can take are the same than android native property, if you need additional info about the parameters and behavior, please refer to android developer guide here: http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

I tested this using Phonegap Build 3.3.0 and jQuery Mobile and worked fine for me, hope it helps.