CODEWITHSUNDEEP
androidhtmljquery-mobilecordova
Marcin Zbijowski
Marcin Zbijowski

Reputation: 820

<select> not working in Phonegap app on Android 2.3.3

I'm working on Phonegap app for Android and iOS. Most of the stuff works pretty well but I'm experiencing a problem with <select> tag. It's enhanced with jQuery mobile and on that version of Android when the appropriate div is clicked / tapped the options are not showing up. They show up when I do two clicks / taps:

  1. on a div containing <select>
  2. on a area above the div

In that scenario options show up and when selected change event is fired and code bind to it is executed.

I found these two android issues: http://code.google.com/p/android/issues/detail?id=10280 and http://code.google.com/p/android/issues/detail?id=6721

I have tried the workarounds mentioned there but they don't change anything. I still have to do two clicks but it's not the behavior I'm after. I only need one click.

Issue exists only on Android 2.3.3 and I think on older versions too. On iOS and newer Androids everything works perfectly fine.

I'm struggling with this issue whole day and tried everything.

Any help, tips would be heavily appreciated. Thanks.

Upvotes: 11

Views: 11814

Answers (8)

koari
koari

Reputation: 66

I'm aware this question was published two years ago, but just in case someone face this problem today, as I did recently:

I had the same behaviour as the one you tell. The problem I had was with a div that appeared as a header and had the attribute data-role="header" and data-position="fixed". There's a bug in jquery mobile that causes a number of strange issues in Android 2.2/2.3 (http://demos.jquerymobile.com/1.3.2/widgets/fixed-toolbars/).

I fixed that error removing 'data-position="fixed"' from the header and adding a custom class with the following code: 

.custom-header{
    position: fixed !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    z-index: 999 !important;
}

Hope it helps somebody.

Upvotes: 0

Mateo Tibaquira
Mateo Tibaquira

Reputation: 2136

The only way it worked for me was adding this on my jQuery script:

$('select').click(function () {
    $(this).focus();
});

Upvotes: 1

Vinay Revankar
Vinay Revankar

Reputation: 832

Did You try adding data-native-menu="false" attribute to the select menu.

Example:

<select name="gender" id="gender" data-theme="b" data-native-menu="false" >
    <option value="">Please specify ...</option>
    <option value="option1">Male</option>
    <option value="option2">Female</option>
    <option value="option3">Undisclosed</option>
</select>

Upvotes: 7

rocher
rocher

Reputation: 1

Make sure your div page is not inside another div. It should look like:

<body>
  <div data-role="page">
    ...
  </div>
 </body>

NOT like this:

<body>
  <div>
    ...
    <div data-role="page">
      ...
    </div>
    ...
  </div>
</body>

I had exactly the same problem using a select with data-native-menu="true" and all worked fine once I removed that extra div.

Upvotes: 0

H L T
H L T

Reputation: 1

I have tried all of your suggests with no luck. What i've ended up with is not the best solution, but it's better than the alternative, if nothing else will update the select box. I did it with jQuery like this:

$(".select_box").change(function() {
    $(this).hide();
    $(".select_box").show();
});

Bum, updated.

Please remember, that this is only a solution if nothing else will work.

Upvotes: 0

Cԃաԃ
Cԃաԃ

Reputation: 1258

This is what solved my problem. In android 2.3.x I've set z-index on select box to ~1000(far above other elements) and it solved the problem. Apparently native browser is messing up the "layers". Hope it helps.

Upvotes: 3

itaynoy
itaynoy

Reputation: 132

Having the same problem with android 2.3 and a JavaScript generated select box, my solution for this was using jQuery to focus the element once it was rendered and every time it was rendered again (even if using $.SELECT.show()).

After doing $("#element").focus() the select box behaves normally again, its both clickable and updates after selecting a new option.

Upvotes: 2

jkndmiththinda
jkndmiththinda

Reputation: 271

I had the same problem, i realized the problem was because i had used data-position="fixed" property for the heading of the page which contained the select element. when i removed data-position="fixed" from my heading, heading was not fixed surely, but got rid of this annoying problem of selects not being 'clicked'. hope this helps!

Upvotes: 1

Related Questions