13

I'm currently using PhoneGap for a mobile app I'm developing. In my Login screen, when I select a text field, the view shrinks horizontally when then keyboard slides up. This only happens on the Android and not iOS.

This concerns me because I have a bottom toolbar that is position:absolute; bottom:0; and this toolbar is pushed up in Android when the keyboard shows up. In iOS, the keyboard just simply overlays it.

Roham Rafii
  • 2,929
  • 7
  • 35
  • 49
AlexCheuk
  • 5,595
  • 6
  • 30
  • 35

3 Answers3

26

In AndroidManifest.xml on your main activity add the following: 

android:windowSoftInputMode="adjustPan"

and

android:configChanges="orientation|keyboardHidden"

In index.html add what traumalles pointed out:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Tisho
  • 8,320
  • 6
  • 44
  • 52
Eu Vid
  • 653
  • 1
  • 8
  • 21
  • 5
    by going this route, wouldn't it be possible that the keyboard covers up the input box. From there, the user won't see what they are typing. – darewreck Oct 18 '16 at 00:36
  • 1
    @darewreck makes a good point, because I had this exact problem and implemented this solution and it won't work for me for this exact reason. For me I think I'm going to have to find a solution where I can figure out how to determine if the keyboard is shown, assign to a variable and toggle the visibility of my bottom bar based on that, because field behavior is better with original settings. Answer's correct though, but darewreck's point is very valid – chairmanmow Jun 07 '17 at 23:48
5

To top on Eu Vid's answer, I wish to point out that Cordova 6.4.0 and above has support for <edit-config /> which we can use to modify AndroidManifest.xml.

First you will need to add the android namespace attribute. In your config.xml, add a new attribute xmlns:android="http://schemas.android.com/apk/res/android" to <widget />. Your widget block should look something like this:

<widget
    id="com.my.app"
    version="0.0.1"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android">

Now add the following code inside <widget />:

<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
    <activity android:configChanges="orientation|keyboardHidden" android:windowSoftInputMode="adjustPan" />
</edit-config>

Now when you call cordova platform add android, the AndroidManifest.xml will be generated with the settings above.

Note:

  • The code above does not overwrite the <activity> block but merges with it; it will only replace the specified xml attributes.
  • If you already called cordova platform add android beforehand, you can remove it by entering cordova platform rm android first before adding it again.
bruceoutdoors
  • 420
  • 5
  • 8
0

Add

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

to your head-tag

allesmi
  • 390
  • 3
  • 14
  • Did you add the second activity tag in the AndroidManifest.xml? Change the package name to com.phonegap.DroidGap for Phonegap 1.4.x and earlier – allesmi Apr 10 '12 at 10:04