A select box should go out of the edge of the dialog box

Question

I have a dialog and in this is a Select box, this should go out the edge of the dialogue field. The select box should extend beyond the bottom. So far I've only managed that the select box in the bottom disappears. I work with jQuery Plugin Chosen.

http://jsfiddle.net/Lsjs2/2/

<div id="dialog" title="Basic dialog">
<select id="chosen">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="VW">VW</option>
    <option value="Nissan">Nissan</option>
    <option value="audi">Audi</option>
</select>

Answer 1

try this css:

#dialog {
    overflow : visible;
}

.ui-dialog {
    overflow : visible;
}

View Fiddle Here

-- EDIT

Sari Alalem is right this will affect other dialog. The solution that I can think of without affecting other dialog is basically by adding another class with overflow:visible or changing css property of the parent of #dialog (after rendering dialog) using JavaScript:

With other dialog in mind, the solution should be

#dialog {
    overflow : visible;
}
$('#dialog').dialog().parent().css('overflow', 'visible');

Updated JSFiddle

Answer 2

Overflow is set to hidden with .ui-dialog .ui-dialog-content. Override it with:

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