Android 4.4.4 Keyboard overlaps input


#1

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


#2

Are you using the ionic Keyboard Plugin?


#3

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": {}
}

#4

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?


#5

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


#6

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?


#7

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


#8

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.