html - <select> box not displaying on Android in PhoneGap

Question

I have some HTML code in a PhoneGap application that displays a <select> box to the user. When I tap on it, the usual Android selection screen doesn't pop up. I had a similar problem with this earlier on webOS (although at that time the drop-downs were working properly).

The <select> is inside a <div> that gets hidden or shown at certain times during execution:

<div id="submit">
  <ul class="rounded">
    <li><select id="item"></select></li>
  </ul>
</div>

The problem only occurs when the <div> has been hidden and then shown again (either directly through CSS or by using jQuery's hide() and show() methods. If I move the <select> box outside of that <div>, or if I make the <div> always visible, then the drop-down behaves as it should; no problems.

Why is this?

Answer 1

In this case the problem was actually cased by jQTouch. To fix it, just comment out these 4 lines in jqtouch.css

Under "body"

  /*-webkit-perspective: 800;*/
  /*-webkit-transform-style: preserve-3d;*/ 

Under "body > * "

/*-webkit-backface-visibility: hidden;*/
/*-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);*/