Cordova + Android - android-windowSoftInputMode adjustPan not working
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).
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
.