25

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

<preference name="fullscreen" value="false" />
<preference name="android-windowSoftInputMode" value="adjustPan" />

but after building, in my AndroidManifest.xml there still is 

android:windowSoftInputMode="adjustResize"

Why is it not working? And how can I solve it?

Andrew Tobilko
  • 48,120
  • 14
  • 91
  • 142
Frank
  • 2,083
  • 8
  • 34
  • 52

6 Answers6

38

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).

Philip Bijker
  • 4,955
  • 2
  • 36
  • 44
  • What is the differences between PhoneGap and Cordova? Except one is Adobe proprietary and other Apache open source? – Unicorn Jul 11 '16 at 16:40
  • 2
    Great answer, put me on the right track. Although it didn't work for me until I used the module approach found [here](https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/#sample-usage) and it took me a second to realize the `scripts` directory everyone suggests would go at the same level as your `config.xml` – rob5408 Sep 18 '16 at 02:19
  • 1
    @PhilipBijker: I have tried your solution but it doesn't works quite well for me. Can I ask you that adding this script would no longer take in consideration the setting that will be set on `config.xml` file ? I've checked to logs and its printed that it has been replaced. Any clue? – el.severo Jan 17 '17 at 16:28
  • @el.severo That's correct. This answer won't look at any value set in `config.xml`. It will just set the input mode to `adjustPan`. – Philip Bijker Jan 19 '17 at 06:56
  • @PhilipBijker: Ok. Thank you! Still have a question: Have you done any specific config in app.config / config.xml ? Could your share some snippets on github (gist) or a sample project. – el.severo Jan 19 '17 at 12:36
  • See also this thread, removing the StatusBar.overlaysWebView(true); answer solved my problem: https://stackoverflow.com/questions/23934689/phonegap-android-keyboard-covers-input-elements-scrolling-is-disabled – kabaehr Oct 29 '18 at 14:40
8

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.

tillsanders
  • 1,656
  • 1
  • 17
  • 29
  • 5
    Works. I had to add `xmlns:android="http://schemas.android.com/apk/res/android"` (which you added also) because I only copied the `` part at first. – MajorBreakfast Jan 09 '18 at 12:18
0

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" />
bummi
  • 27,123
  • 14
  • 62
  • 101
Gajanan
  • 31
  • 1
  • 8
  • by `adjustResize|adjustPan`, are you trying to say that the value can be either of the two, or is `adjustResize|adjustPan` the literal value of the `android-windowSoftInputMode` preference ? I would be surprised if it could hold both values at the same time. – doubleOrt Jul 28 '17 at 05:46
0

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.

akunamatata
  • 31
  • 5
  • This does not provide an answer to the question. Once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/12746971) – Nitzan Tomer Jun 20 '16 at 11:17
  • @NitzanTomer why it is not an answer? That happened to me too, i was changing the wrong AndroidManifest. Then i realized that the one i was changing it is generated automatically by the correct AndroidManifest file which is supposed to change..And that is the answer. Thank you – akunamatata Jun 20 '16 at 11:47
  • This seems to be more like a comment than an answer – Nitzan Tomer Jun 20 '16 at 12:48
0

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>
David Boho
  • 2,646
  • 20
  • 17
0

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.

Chris Edgington
  • 1,208
  • 12
  • 11