Android tablet virtual keypad overlaps textarea element in web page

700 views Asked by At

I'm working on web page for Android tablet devices and iPad. This page works fine on iPad. But it's giving me hard time on Android tablets.

The webpage in question has textarea element at bottom of the page. Now when this element gets focus, virtual keypad slides out. But it overlaps the focused textarea element and thus it is not visible whatever is being typed in textarea. I'm testing from Android emulator.

Does anyone have exp same behavior or have any solution>

Pls note that it's web app for browsers. There are solutions on SO for same problem in native app. None of them work for web app.

Thank you.

1

There are 1 answers

0
indusBull On BEST ANSWER

After spending, lots of time and trying all kinds of work around I finally changed my html doctype and suddenly it started working. Now the keypad doesn't overlap bottom textarea field and instead slides up when it gets focus.

Those of who exp same problem, check you doctype. I changed doctype in my page from

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

to HTML5 doctype

<!DOCTYPE html>