I'm trying to create an Android app that uses a webview to allow users to enter their username/password, but on tapping the input boxes they get doubled (see the picture below). I'm using the iScroll jQuery plugin to allow users to scroll the page up when the keyboard es up and blocks the input area. Here is the layout/css:

CSS:

#scroller{
    position:absolute;
    overflow:hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:0;

}
#scroll_content {
    margin-top: 70px;/*must match the topbar height*/
    padding-bottom:70px;
}

html:

...
<div id="scroller">
  <div id="scroll_content">
    <!-- page content here -->
  </div>
</div>
...

I do notice that no matter what webpage I view on the Android platform, it overlays an extra input box over the input I just tapped. The key, I guess, would be to disable the webview's default in this case? How do you do that, or can you even?

Thanks

I'm trying to create an Android app that uses a webview to allow users to enter their username/password, but on tapping the input boxes they get doubled (see the picture below). I'm using the iScroll jQuery plugin to allow users to scroll the page up when the keyboard es up and blocks the input area. Here is the layout/css:

CSS:

#scroller{
    position:absolute;
    overflow:hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:0;

}
#scroll_content {
    margin-top: 70px;/*must match the topbar height*/
    padding-bottom:70px;
}

html:

...
<div id="scroller">
  <div id="scroll_content">
    <!-- page content here -->
  </div>
</div>
...

I do notice that no matter what webpage I view on the Android platform, it overlays an extra input box over the input I just tapped. The key, I guess, would be to disable the webview's default in this case? How do you do that, or can you even?

Thanks

• javascript
• android
• html
• webview
• cordova

• 1 None at all. I gave up and went native. Sorry. – RyanM Commented Mar 30, 2011 at 11:04
• Have the same issue, damn. Addig those translate3d CSS properties neither helped me. :( – laszlo-horvath Commented Nov 30, 2012 at 15:01
• this one worked for me! stackoverflow./questions/9423101/… – Midhun KM Commented Oct 14, 2014 at 6:07

2 Answers 2

This is likely to be linked to CSS transitions. The phone seems to lose track of the real position of the textfield. Basically, it seems to be confused between the absolute positioning and the translate3d() that iscroll is doing. An easy way to fix it is to set translate3d(0,0,0) at start on your div to make sure it knows where it is. Have a look at my article for more details: http://java-cerise.blogspot./2011/10/dodgy-double-input-fields-on-android.html hope that helps.

add following to you css:

#your-container-div-id{
    -webkit-transform: translate3d(0,0,0);
}