CODEWITHSUNDEEP
androidcordovakeyboard
AlexCheuk
AlexCheuk

Reputation: 5845

PhoneGap: Is there a way to stop the keyboard from resizing the view?

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.

Upvotes: 13

Views: 21556

Answers (3)

bruceoutdoors
bruceoutdoors

Reputation: 430

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.

Upvotes: 5

Eu Vid
Eu Vid

Reputation: 653

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" />

Upvotes: 26

allesmi
allesmi

Reputation: 390

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

Upvotes: 0

Related Questions