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

Answer 1

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