JQuery UI selectmenu inside modal dialog

Question

Hi, I am trying to add selectmenu inside a modal dialog, but many options are hidden and I cannot click them.

Here is an example

http://jsfiddle.net/4dd62ukv/1/

<label for="month">Month</label>
<select name="month" id="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>

Any idea? Thank!

Answer 1

.ui-dialog {overflow: visible;}

Fiddle

Answer 2

You can also try the following:

div.ui-selectmenu-open {
    position: absolute;
    z-index: 65535;
}

For JUI 1.11

Answer 3

. .

.ui-front{z-index:0 !important; } 
.ui-selectmenu-open {z-index:9999 !important;}

Answer 4

, selectmenu "appendTo". , , id/class , , selectmenu .

Answer 5

- "z-index" "overflow", selectmen.

, selectmenu.

$("idOfDialog").on("dialogopen", function(e, ui){
    $('idOfSelectMenu').selectmenu();
}