Keyboard obscures input text area

Question

I have a form that is displayed inside http://ionicframework.com/docs/api/service/$ionicPopup/. The issue is that when cursor is placed inside the final input (text area), the keyboard shows but the input doesn't scroll back into view and is obscured by the keyboard. The user has to scroll down.

I am using an android device.

The documentation says

Ionic will attempt to prevent the keyboard from obscuring inputs and focusable elements when it appears by scrolling them into view. In order for this to work, any focusable elements must be within a Scroll View or a directive such as Content that has a Scroll View.

If I wrapped the form with ion-content tag, the input box does scroll back into view but using messes up with my layout and am looking for another solution.

Update: How the manifest lookslike

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="myAwesomeApp" 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" android:supportsRtl="true">
    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
        <intent-filter android:label="@string/launcher_name">
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity android:name="me.apla.cordova.AppPreferencesActivity" />
    <activity android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden" android:exported="false" android:name="com.google.zxing.client.android.CaptureActivity" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden">
        <intent-filter>
            <action android:name="com.google.zxing.client.android.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="16" android:targetSdkVersion="23" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

score 0 · Answer 1 · answered May 09 '16 at 18:27

0

Add this into your Activity in AndroidMenifest

 android:configChanges="keyboardHidden|orientation|screenSize"

answered May 09 '16 at 18:27

pavel

1,603
22
19

score 0 · Answer 2 · answered May 10 '16 at 13:00

0

If you are using cordova keyboard you can Use cordova.plugins.Keyboard.disableScroll(false); when the popup open and use cordova.plugins.Keyboard.disableScroll(true); when it closes. this way the layout can handle overlapping keyboard in case of using popups.

answered May 10 '16 at 13:00

Vishal Wadhawan

1,085
1
9
11

Am not using cordova keyboard – user1275105 May 14 '16 at 18:34

score 0 · Answer 3 · answered May 11 '16 at 09:37

0

You have to set android:windowSoftInputMode="adjustResize" in the manifest to the Application or to the Activity.

And check whether you set something like, getWindow().setSoftInputMode(...) in your Activity. If so, remove those lines.

answered May 11 '16 at 09:37

Bob

13,447
7
35
45

Please take a look at the manifest in my question. That settings is already there. – user1275105 May 11 '16 at 13:42
yes. I had a look, and its set in only one Activity, not in Application. how do i know thats the Activity where the keyboard problem presents. – Bob May 11 '16 at 13:49
So should I add that setting each Activity tag? This file is generated and isn't manually put together. I think cordova generates this file for us. Is there some kind of hook in Ionic or Cordova where this setting can be set? – user1275105 May 11 '16 at 14:12

Keyboard obscures input text area

3 Answers3