How to auto-scroll to input field in Android when the soft keyboard overlaps them on showing?

Question

I am developing a hybrid app using Worklight, and I am experiencing the following issue:

When the user clicks on an input field, the soft keyboard that pops up hides the input field when the latter is relatively low on the screen. The page is scrollable, so the user can scroll and see the field again, but the customer requirements define that the page will auto-scroll until the field is visible.

Please note that this happens only in the Android environment. In the iPhone and iPad environments the default behavior is the the desired one.

Based on my findings, the trick should be done via the android:windowSoftInputMode attribute in the Android manifest file. However, all my efforts there failed to achieve the auto-scroll.

If there is a solution that is Worklight specific, I would prefer to use it, rather than intervening in the Android native code.

Plutonic

Answer 1

This isn't really about Worklight at all... but about web apps in general in Android, it seems (from a quick search in Stack Overflow).

Here are some suggested solutions, that differ from yours:

• Textbox hidden below keyboard in Android webview
• html textfield in WebView in an Android application is hidden by the soft keyboard
• Keyboard hiding EditText when android:windowTranslucentStatus=true
  
  
• You could possibly also use iScroll.js (lite edition) - or implement this yourself by catching the focus event - to scroll a specific amount of pixels upwards.

Towne

Thank you Idan for your help. I managed to achieve the desired functionality by combining "android:windowSoftInputMode="adjustResize" in the Android Manifest file and using the meta tag "height=device-height" in my html DOM. The use of the meta tag is crucial apparently. – Plutonic