Cordova + Android - android-windowSoftInputMode adjustPan not working

Question

I\'m using Cordova 5.4.0 and I have this in my config.xml:

Answer 1

I had the same problem and it turned out to be a problem with using display: flex for the container of the inputs. Changing the CSS so the container was not flexbox based solved the keyboard / input / scroll interaction problem on Android for me.

Answer 2

I found a simple solution using the edit-config tag which is built into cordova since v6.4.0. My config.xml now looks like this and the keyboard no longer resizes the viewport!

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <!-- ... -->
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity[@android:name='MainActivity']">
        <activity android:name="MainActivity" android:windowSoftInputMode="adjustPan" />
    </edit-config>
    <!-- ... -->
</widget>

Hint: When experimenting to get this working, I made some accidental changes to my AndroidManifest.xml. You can reset this easily be removing and re-adding the android platform to your cordova project like so: cordova platform rm android && cordova platform add android.

Answer 3

You can also use the cordova-custom-config

cordova plugin add cordova-custom-config

and add this to your config.xml

<platform name="android">
   <preference name="android-manifest/application/activity/@android:windowSoftInputMode" value="adjustPan" />
</platform>

Answer 4

It looks like you are changing the wrong AndroidManifest.xml. In your application, under \platform\android... you will find the .xml file, you have to change that one.

Answer 5

The android-windowSoftInputMode preference seems to be supported by Phonegap only, not Cordova.

Workaround 1 (Cordova 6.4+): use edit-config

Make sure the xmlns:android="http://schemas.android.com/apk/res/android" namespace attribute is included in the widget element and add an edit-config element:

<widget xmlns:android="http://schemas.android.com/apk/res/android" ...>
    ...
    <edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:name='MainActivity']" mode="merge">
        <activity android:windowSoftInputMode="adjustPan" />
    </edit-config>
    ...
</widget>

Workaround 2 (prior to Cordova 6.4): use a plugin

Add the cordova-custom-config plugin:

cordova plugin add cordova-custom-config

Add the following preference:

<platform name="android">
    <preference name="android-manifest/application/activity/@android:windowSoftInputMode" value="adjustPan" />
    ...
</platform>

Workaround 3: add a before_build hook

Add the following hook to config.xml:

<hook type="before_build" src="scripts/appBeforeBuild.js" />

Add a file appBeforeBuild.js to the scripts directory with the following content:

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');

var pathToManifest = path.join(__dirname, '../platforms/android', 'AndroidManifest.xml');
if(fs.existsSync(pathToManifest)) {
    var config = fs.readFileSync(pathToManifest, 'utf8');

    var result = config.replace(/(android:windowSoftInputMode=").*?(")/, '$1adjustPan$2');
    fs.writeFileSync(pathToManifest, result, 'utf8');

    console.log('Set android:windowSoftInputMode to adjustPan');
}
else {
    console.log('Could not find AndroidManifest to set android:windowSoftInputMode');
}

This script will use Node to lookup the AndroidManifest and do a regex replace on the android:windowSoftInputMode attribute (first occurrence only).

Answer 6

Try this one

1. Index.html

   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
   

2. config.xml

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