Phonegap - Dropdown not clickable (Android and iOS)

Question

I am creating an app for iOS, Android and Blackberry and am using phonegap (HTML and JavaScript) to do so.

However, having added several HTML dropboxes I cannot seem to click on them using my Android (have not tested on iOS yet). These do however work in a normal web browser (FF and Chrome)

<select>
 <option>option 1</option>
 <option>option 2</option>
</select>

Can someone please advice how I can overcome this touch selection issue?

Thanks

• SingleWave Games: Hi, yes i am using iscroll and releasied that it was this that was causing the problem, however this means my page no longer srolls which is no use to me. Can you think of a fix to either my orginal issue, or an alternative way to scroll my android and IOS page. Thanks

Answer 1

add the following code to the _start() function in iscroll.js, before the e.preventDefault()

 if ( e.target.tagName == "SELECT"
 || e.target.tagName == "INPUT"
 || e.target.tagName == "BUTTON"
 || e.target.tagName == "TEXTAREA") {
 return true;
 }

should work fine.

• SingleWave Games: I have added that code here, however it still does not work, have i missed something? _start: function (e) { if ( e.target.tagName == "SELECT" || e.target.tagName == "INPUT" || e.target.tagName == "BUTTON" || e.target.tagName == "TEXTAREA") { return true; }
• ghostCoder: check this out, and tell me if some soln works github.com/cubiq/iscroll/issues/13
• SingleWave Games: just tried all of those variations and nothing seemed to work, do also I cannot seem to find the _start(). I have _start: function (e) and onBeforeScrollStart: function (e) { e.preventDefault(); }
• SingleWave Games: Do you think i have a dodgy iscroll.js file? Would it be possible to send you the file?
• ghostCoder: get the latest iscroll4 code github.com/cubiq/iscroll/blob/master/src/iscroll.js

Answer 2

I have found a solution for this issue and that is using jquery mobile dropdowns. This is as simple as below. I also was also using a custom footer, which I have also taken from jquery mobile. These can be found here - http://jquerymobile.com/demos/1.0.1/

<label for="select-choice-1" class="select">Shipping method:</label>
 <select name="select-choice-1" id="select-choice-1" data-native-menu="false">
 // POP OUT DROP DOWN HEADER
 <option value="choose-one" data-placeholder="true">Choose one...</option>
 <option value="standard">options/option>
 </select>

*EDIT:

The below javascript snippet may work better and involves you binding touchstart to the relevent dropdown box:

var dropdown = document.getElementById('Dropdown Name');
dropdown.addEventListener('touchstart', function(e) {
 e.stopPropagation();
}, false);

• nani1216: Hi LandL Partners What could be the issue?. I'm not using jQuery mobile in my app, how to solve the issue. i checked it android 2.3 and the cordova version is 3.3.0
• SingleWave Games: @nani1216 please see my edited answer this may help you.