Search code examples
androidcsscordovaandroid-softkeyboardadjustpan

Android webview keyboard covering up input

The desired effect for my android application is to have a webview with an input box and content. When the user clicks on the keyboard, the keyboard pushes the input box up, but does not resize the main content and just overlays ontop of it as seen in the diagram below.

enter image description here

The problem I'm experiencing is that the keyboard covers the input box and does not push it up.

This is currently a cordova android application. In the manifest, I have configued

 <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleInstance" android:name="GigJam" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustPan">

Also in the config.xml:

   <preference name="Fullscreen" value="false" />

I used android:windowSoftInputMode="adjustPan" to prevent the screen from resizing which is what i want since I don't want the content to be squished. I've also tried configuring the css for the input box to be fixed and absolute (basically tied to the bottom of the webview.

From my understanding, when the keyboard pops up from an edit in the input box, that it would push up the box as well because the input box is constrained to the webview which will be pushed up as well.

Any advice appreciated, Thanks, D

Solution

  • Android has a keyboard event that I listen to. When the show/hide is trigger, I grab the active input component and transform the box in the y axis by the size of the keyboard height which can be grab from the event in the listener. I transform back when the show is triggered.

    Note: resize needs to be disabled for the android:windowSoftInputMode and set to "adjustPan"