Dropdown menu is cutting off in jquery ui modal dialog

Question

Using select2 in jquery.ui.dialog. The problem is when the dropdown menu is open it won't overflow outside the dialog as the native <select> does but just pushes the dialog height bigger.

How to detach select2 dropdown menu from the document flow so that the menu doesn't cut off?

I have already tried to increase dropdownmenu's z-index and change jquery.ui.dialog overflow rules. But none of these seem to have any effect.

<div id="myDialog">   
    <select id="myselect">
      <option>Select2Foo</option>
      <option>Select2Bar1</option>
      <option>Select2Bar2</option>
      <option>Select2Bar3</option>
      <option>Select2Bar4</option>
      <option>Select2Bar5</option>
    </select>
</div>

$("#myDialog").dialog({
    autoOpen  : true,
    modal     : true,
    title     : "A Dialog Box",   
    width: "90%",
});


$('#myselect').select2({
  dropdownParent: $('#myDialog')
})

It "cuts off" / is in the document flow pushing the modal bigger.

I'd rather want it to behave as native select

The fiddle:

http://jsfiddle.net/anmatika/dy3am21n/1/

Answer 1

Answering my own question since got it working and this could be helpful to others in the future.

jquery.ui.dialog creates a wrapper .ui-dialog around the element you want to make as a dialog.

You'd need the both, your dialog element and the jquery.ui dialog wrapper, to have overflow: visible set.

.ui-dialog,
#myDialog {
  overflow: visible;
}

https://jsfiddle.net/anmatika/dy3am21n/22/