Android 4.4.4 Keyboard overlaps input

Here is my problem. I have a simple input form with some inputs inside it. When running in Android, the keyboard overlaps the inputs. I’ve read many questions like this here, but none seem to work. :frowning:

Here is the page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

      <div class="bar bar-subheader bar-assertive" ng-if="errors === true">
          <h1 class="title">Usuário ou senha inválidos.</h1>
      </div>

      <ion-content class="has-header">
          <ion-scroll id="fundoRio" resize="">
              <div class="row">
                  <div class="col col-50 col-offset-25 text-center">
                      <img src="img/LoginLogo.png" alt="" class="imgLogo">
                  </div>
              </div>
              <div class="row">
                  <div class="col col-80 col-offset-10">
                      <p class="loginCaption">A cidade maravilhosa conta com um novo aliado para se proteger: <span class='txtOlive'>você</span>.</p>
                  </div>
              </div>
              <div class="row">
                  <div class="col">
                      <div class="hrefRegister"><a href="#/app/register">Primeira vez? Clique aqui</a></div>
                      <form ng-submit='login(user)'>
                          <div class="list list-inset">
                              <label class='item item-input'>
                                  <input type="text" pattern="[a-z]{5,25}" class="loginInput" placeholder="USUÁRIO" ng-model='user.username'>
                              </label>
                              <label class="item item-input">
                                  <input type="password" class="pwInput" placeholder="SENHA" ng-model='user.password'>
                              </label>
                          </div>
                          <div class="row">
                              <button id="login-btn" type="submit" class="submitInput button button-balanced col">
                                  <i ng-if="sendingForm" class="ion-loading-c"></i>
                                  <span ng-if="!sendingForm" id="login-txt">FAZER LOGIN</span>
                              </button>
                          </div>
                      </form>
                  </div>
              </div>
          </ion-scroll>
      </ion-content>
  </body>
</html>

Here is config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        An Ionic Framework and Cordova project.
    </description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="fullscreen" value="false" />

    <!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable storage 
         to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.
    -->
    <preference name="BackupWebStorage" value="none" />

    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
</widget>

And here is the manifest from platform/android:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" android:windowSoftInputMode="adjustResize" package="com.ionicframework.starter" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="HelloCordova" android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
</manifest>

The html page is taken from some other post on this forum (because it says that it works there…)

Are you using the ionic Keyboard Plugin?

Yup, I am. Here is the plugins/android.json

{
    "prepare_queue": {
        "installed": [],
        "uninstalled": []
    },
    "config_munge": {
        "files": {
            "res/xml/config.xml": {
                "parents": {
                    "/*": [
                        {
                            "xml": "<feature name=\"Keyboard\"><param name=\"android-package\" value=\"com.ionic.keyboard.IonicKeyboard\" /><param name=\"onload\" value=\"true\" /></feature>",
                            "count": 1
                        },
                        {
                            "xml": "<feature name=\"Device\"><param name=\"android-package\" value=\"org.apache.cordova.device.Device\" /></feature>",
                            "count": 1
                        }
                    ]
                }
            }
        }
    },
    "installed_plugins": {
        "com.ionic.keyboard": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "org.apache.cordova.console": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "org.apache.cordova.device": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        }
    },
    "dependent_plugins": {}
}

I think I have it now, so this works very different then in iOS. In iOS the content is “pushed up” when the keyboard appears, in Android you have to scroll?

Consider the android notes.
http://ionicframework.com/docs/api/page/keyboard/

I do not have problems on android with that.

You also have to set:
<activity android:windowSoftInputMode="adjustResize">

I’ve added : android:windowSoftInputMode=“adjustResize”>; still no luck

What do you mean you do not have a problem with that? Is, on Android, your content pushed up when the keyboard appears?

This is funny when you say ‘it works’. There is an open bug for this for quite a while…

https://code.google.com/p/android/issues/detail?id=5497

Feeling really confused right now

1 Like

Yep, i am using it for a fullscreen app and a non-fullscreen app.
I am using last ionic-build and for my fullscreen app i’am using this:

If your app is running in fullscreen, i.e. you have in your config.xml file you will need to set ionic.Platform.isFullScreen = true manually.

1 Like