Phonegap select box is not working

[Nomorewine]

Hello everyone.
Please help me.
Select box <select> is not working in phonegap app only on gingerbread.
It works on iOS and Adroid ice cream sandwich + jelly bean.
I use jquery 1.9.1 and iscroll 4.2.5 and phonegap 2.3.0.
Does anyone has any idea why would it work in ics and jb but not in gb?

[LastMitch]

Does anyone has any idea why would it work in ics and jb but not in gb?

Without any code it's a bit hard to tell you.

For example:

<div>
<select id="item"></select>
</div>

Most likely it's the CSS file.

Can you post the code? Right now, it's just guessing.

[Nomorewine]

i cannot post the whole code, sorry, but here how it is constructed.

<div class="selectArea">
<select class="cityList">
<option>city1</option>
<option>city2</option>
<option>city3</option>
<option>city4</option>
</select>
</div>

in css the select box is like this:

select{height: 30px !important; padding: 0 30px 0 5px; -webkit-appearance: none; border-radius: 3px; border: 1px solid #aaaaaa; background: url(../images/btn/btn_select.png), -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#eee)); background-repeat: no-repeat, repeat; background-size: 30px, 100%; background-position: right center, left top; letter-spacing: 0em; vertical-align: middle; font-size: 1em;}
.selectArea {display:none; position:relative; height:50px; background:#e3e0f3;}

i have tried adding

data-native-menu="false"

but it had no effect.
javascript toggles css display none/block for the select box.

[LastMitch]

javascript toggles css display none/block for the select box.

Try this (just an example not tested):

<form action="#" method="post">     
<select id="cityList" name="cityList">
<option value="0" selected="selectArea"></option>
<option value="1">city1</option>
<option value="2">city2</option>
<option value="3">city3</option>
<option value="4">city4</option>
</select>
<input type="submit" value="Send" />
</form>

This is the iscroll code:

var selectField = document.getElementById('cityList');
selectField.addEventListener('touchstart', function(e) {
e.stopPropagation();
}, false);

[Nomorewine]

Hello Mr. LastMitch. the workaround that you have provided did solve the problem partialy. :) Thank you very much. But the problem still exists. I haven't finished testing yet, so I cannot say for sure what does still cause the problem.
Before the workaround: select box worked 0/100
After the workaround: working 5/100
I will work on the problem some more. and update when the problem will be solved.

[Nomorewine]

After some more testing I found that if the select box is out of view port and back in it has like 70/100 chance to work.

[Nomorewine]

have changed z-index of the select element to ~1000 and the parent element to ~999 it solved the problem 100/100

[LastMitch]

have changed z-index of the select element to ~1000 and the parent element to ~999 it solved the problem 100/100

It's great that you fixed the issue. It's usually the CSS, you have to play around with it. But I'm glad you figure it out.

[jasonsilver]

Did not fix it for me. I can view select boxes, but choosing them has no effect.... eventually it will if I keep trying, and moving outside, then back inside of the viewport does increase the odds.

[Yash_5]

how to develop a search based select box in phonegap?

[diafol]

Start your own thread