Question

I have this problem with a select in my dialog. The dialog works as intended but when it comes to the select it goes tits up.

The options from my select stay visible at all times. Either above the select while clicked on it. And at the bottom of the page when an option is selected or by default. I tried several things and only one seems to work: Set the menu to default. Since the markup of this changes depending on OS i rather not use it. Also the JQM version is just pretty!
As for libs: I’m using JQuery 1.7 and JQM 1.2
I also use the JQM stylesheet.

Here’s an overview of my code:

<div data-role="page" id="preDialogPage" data-add-back-btn="true">
    <a href="#dialoog" data-role="button" id="btn" data-rel="dialog" data-theme="a">dialog</a>
</div>
<div data-role="dialog" id="dialoog" class="dialogPage">
    <div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-d">
        <h1 class="ui-title">Report an issue</h1>
    </div>
    <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content ui-body-d">
        <select id="issueSelect" data-native-menu="false"> 
            <option value="carIssue">A car issue</option> 
            <option value="parkingIssue" >A parking problem</option> 
            <option value="appIssue">A app issue</option> 
            <option value="otherIssue">Other</option> 
        </select>
    </div>
</div>​

If you guys need more info just ask!

Answer 1

It seems your problem comes from using an incorrect CSS stylesheet.
Replacing the one your using byt htis one for instance http://jquerymobile.com/test/css/themes/default/jquery.mobile.css will fix your issue