Android keyboard overlapping application


#1

Hi there!

The keyboard is hiding my input on android. I don’t know what to do.

Any ideas? iPhone works fine.


#2

When I simulate a android device on chrome, I have the correct behaviour . The screen moves when I focus a input but that does not happen on the emulator.


#3

Can you provide a bit more? A screen capture, a codepen? It’s kind of hard to know what the issue is with these. Do you have the ionic keyboard plugin installed?


#4

Sorry!

Yes, the plugin is installed.

<feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true" />
    <param name="android-package" value="IonicKeyboard" onload="true" />
</feature>

This is the config.xml from the projects root.

<ion-view title="Login">

<ion-nav-buttons side="left">
</ion-nav-buttons>

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

This is the view file.

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" android:windowSoftInputMode="adjustPan" package="com.synk.corneta" 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="CornetaRIO" 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" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
</manifest>

ManifestFile


Images of what happens


#5

Try separating the cofig.xml into two statements.

<feature name="Keyboard">
        <param name="android-package" value="com.ionic.keyboard.IonicKeyboard" />
        <param name="onload" value="true" />
      </feature>

 <feature name="Keyboard">
         <param name="ios-package" value="IonicKeyboard" onload="true" />
 </feature>

Also, can you try a sample project from out CLI. It comes with the keyboard plugin installed and set up properly. There may be some issues in your code, but without seeing your project I can’t be sure.

I wasn’t able to reproduce it with the sample projects.


#6

I have a doubt… The config.xml from my projects root need to have those plugins defined?

I mean, the plugins/android.json seem to have those informations already.


#7

I removed the plugins definition from config.xml (root) and everything worked fine. The keyboard problem persists.

I turned the android fullscreen off and now when I click on a input the screen goes up and then goes down immediately. I also have this on my AndroidManifest.xml

android:windowSoftInputMode="adjustResize"

This is on the activity’s node.

I don’t know if this is a problem with the emulator. I’ll try to find a device to test.


#8

I’ve experienced this behaviour with a HTC running Android 2.3. However this didnt’ happen with any of my more modern devices…Very odd the behaviour where the keyboard displays and then hides itself.


#9

Everything seems to be working fine now.


#10

Did you do anything to fix this? or did the problem just disappear?


#11

Everything was working fine on the device. The only changes I’ve made was the changes that I’ve posted above


#12

That’s just weird. I took the same page that you have - exact html, put it on my device and it’s not working :frowning: The keyboard still overlaps the inputs…


#13

Did you make the same changes on config.xml?

Are you running on an emulator or a device?

On emulator the problem persists but on device works fine.


#14

It’s on a real device, nexus 5 running Android 4.4.4, here is the 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>y App</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="fullscreen" value="false" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="false" />
    <preference name="android-windowSoftInputMode" value="adjustResize"	/>

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

#15

can you post your AndroidManifest.xml ?


#17

Sure

<?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="MyApp" 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>
        <activity android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden" android:exported="false" android:name="com.google.zxing.client.android.CaptureActivity" android:screenOrientation="landscape" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden">
            <intent-filter>
                <action android:name="com.phonegap.plugins.barcodescanner.SCAN" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity android:label="@string/share_name" android:name="com.google.zxing.client.android.encode.EncodeActivity">
            <intent-filter>
                <action android:name="com.phonegap.plugins.barcodescanner.ENCODE" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity android:label="@string/share_name" android:name="com.google.zxing.client.android.HelpActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

#18

Any working solutions for this issue.the exact issue am also facing.


#19

see this thread for a solution that works: