18

In my application the registration I have an issue when I try to type in field the keyboard hides the other fields those are the screenshots enter image description here

enter image description here

how can we fix that I want the page to be scrollable, for info I'm using the phonegap build this needs for sure changes into the config.xml I don't know really how to do it.

Cœur
  • 37,241
  • 25
  • 195
  • 267
aymen taarit
  • 404
  • 1
  • 5
  • 15
  • As Dylan commented below, this is one of the quirk of scrolling on mobile. Scrolling is one of the hardest thing to maintain in PhoneGap/Mobile. Especially if you want to support Android 2.3 or iOS 4. Luckily, you have things like overthrowjs or iscroll; but you have to make sure to implement these things from the beginning. Other quirk of scrolling is forgetting to lock scroll on html, body, zindex elements, etc... When your main element stop scrolling, these outer element will start to scroll and create all kind of fun especially with bounce effect on some Android and iOS. – Noogen Jun 14 '13 at 14:35

3 Answers3

53

I had this problem as well - the underlying problem it seems is you can't edit the androidManifest file with Phonegap Build - all you can do is edit the config.xml file which really only allows you to change a limited subset of settings. What I would like (and a lot of others have been screaming for a long time fo) is to be able to change the windowSoftInputMode.

I did however find a solution to my problem - which was the keyboard appearing over fields at the bottom of the screen which I think is the same problem you're having. For me - I'm using the latest phonegap 2.7.0 (but was able to reproduce the same behaviour and solution by specifying phonegap 2.5.0 in the config.xml file)

The solution I found was to change this setting in config.xml

<preference name="fullscreen" value="false" />

This does mean you get the 'status bar' at the top of the screen.. which is no biggie for me (in fact I think it's better to have it there.. at least for my app) - with that setting set to "false" instead of "true" - the page now scrolls up to reveal the field you're editing when the keyboard opens. (to be more precise, I believe the viewport changes rather than scroll up)

Hope that helps and solves your problem.. took me hours of searching and fiddles to get it to work (if I didn't find that I would have had to abandon phonegap build)

joy! Dylan

Dylan Hamilton-Foster
  • 848
  • 8
  • 7
  • 1
    On Android, can't you just set this in your main activity? android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" This allow Android to default behavior to shrink the view on display of keyboard. On iOS, you need this setting in your config xml: for the same behavior. This assumes that you have overflow scroll on the element. – Noogen Jun 14 '13 at 14:22
  • @Dylan Hamilton-Foster Hey, i have try your answer but still issue is same. i have use auto complete text box. so right now user can't see full drop down due to keyboard. and keyboard also suggest text from dictionary. how can in off it? – Chintan Khetiya Sep 07 '13 at 05:22
  • @Dylan Hamilton-Foster, Great!!! After a long time i have found this solution but now the problem is i want full screen too. Is there any way i can get full screen and get rid of this problem. – Viken Patel Dec 31 '13 at 11:47
  • it works !! thanks ... to make this work you should not have android:windowSoftInputMode="adjustPan" in your activity tag – Naveed May 30 '16 at 07:38
8

Try something like this in config.xml:

<preference name="fullscreen" value="false" />
<preference name="android-windowSoftInputMode" value="stateVisible" />
Devid Farinelli
  • 7,514
  • 9
  • 42
  • 73
Manuel
  • 81
  • 1
  • 3
  • I tried with value="stateUnchanged|adjustResize" worked perfect. Above option also works but for me app started with keyboard visible which is not what user wants in most cases. – karma Jan 30 '16 at 18:29
1

if you use phonegap build

try to add this in config.xml, it helps me out from the same issue:

<gap:config-file platform="android" parent="/manifest/application">
        android:windowSoftInputMode="stateVisible"
</gap:config-file>

thanks Manuel to point out the parameter windowSoftInputMode="stateVisible"