CODEWITHSUNDEEP
javascriptjqueryjquery-ui
lorigio
lorigio

Reputation: 89

Jquery UI selectmenu inside modal dialog

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

Upvotes: 4

Views: 7549

Answers (5)

Bergi
Bergi

Reputation: 361

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

Upvotes: 3

Ishwar Rimal
Ishwar Rimal

Reputation: 1101

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.

Upvotes: 1

Nimesh
Nimesh

Reputation: 3610

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

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

Upvotes: 2

Fieava
Fieava

Reputation: 33

You can also try this:

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

For JUI 1.11

Upvotes: 2

isherwood
isherwood

Reputation: 61056

.ui-dialog {overflow: visible;}

Fiddle

Upvotes: 5

Related Questions