Hi i'm trying to add a selectmenu inside a modal dialog but many options are hidden and i can't click them

Here's the example

/

<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? Thanks!

Hi i'm trying to add a selectmenu inside a modal dialog but many options are hidden and i can't click them

Here's the example

http://jsfiddle/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? Thanks!

• javascript
• jquery
• jquery-ui

5 Answers 5

.ui-dialog {overflow: visible;}

Fiddle

You don't have to change any "z-index" or "overflow" properties to display the selectmenu right.

If you want to a selectmenu inside a dialog, first open the dialog and after the dialog is open create the selectmenu.

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

You can also try this:

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

For JUI 1.11

I found below solution. It's working for me.

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

You can solve this by using a property of selectmenu "appendTo". All you need to do is provide the id/class of the division where you want the selectmenu to be visible.