Menu
The select wont open when inside of a table inside of the dialog. I included a code snippet of the problem
$('select').selectmenu();
$('.RegularDialog').dialog({
autoOpen: false,
modal: true,
height: 500,
width: 570
});
$('#OpenDialog').click(function(e) {
$('.RegularDialog').dialog('open');
});<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<div id="Dialog" title="Edit Dialog" class="RegularDialog">
<form action="">
<table>
<tr>
<td>Select the Type</td>
<td>
<select id="Type">
<option value="a">Type 1</option>
<option value="b">Type 2</option>
<option value="c">Type 3</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<button id="OpenDialog">Open Dialog</button>
</body>
954
The problem is that jQuery UI is generating the "drop-down" for the select on the page, but this is outside the div that becomes your popup. Then when the dialog is displayed, it covers the "drop-down". If you move the selectmenu () call to after the dialog appears, it works correctly.
2) In Jquery 1.10 there is breaking changes, so dialogs z-index is recalculating on the fly. This hides selectmenu dropdown items after clicking somewhere inside dialog. To fix both, you could just append selectmenu to some empty div before body:
2) In Jquery 1.10 there is breaking changes, so dialogs z-index is recalculating on the fly. This hides selectmenu dropdown items after clicking somewhere inside dialog. To fix both, you could just append selectmenu to some empty div before body: And make a z-index of selectmenu significantly higher than dialog ui-front layout.
jQuery UI Dialog - Default functionality. Basic dialog. This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
The problem is that jQuery UI is generating the "drop-down" for the select on the page, but this is outside the div that becomes your popup. Then when the dialog is displayed, it covers the "drop-down".
If you move the selectmenu() call to after the dialog appears, it works correctly.
Your snippet updated:
$('.RegularDialog').dialog({
autoOpen: false,
modal: true,
height: 500,
width: 570
});
$('#OpenDialog').click(function(e) {
$('.RegularDialog').dialog('open');
$('select').selectmenu();
});<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<div id="Dialog" title="Edit Dialog" class="RegularDialog">
<form action="">
<table>
<tr>
<td>Select the Type</td>
<td>
<select id="Type">
<option value="a">Type 1</option>
<option value="b">Type 2</option>
<option value="c">Type 3</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<button id="OpenDialog">Open Dialog</button>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
