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?

Member Avatar
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.

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.

Member Avatar
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);

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.

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.

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

Member Avatar
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.

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.

how to develop a search based select box in phonegap?

Member Avatar
diafol

Start your own thread