Good day,
I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a simple example: http://jsfiddle.net/olegbevz/083z9ctL/1
<div class="dialog" style="height: 100px;">
<div style="height:100px; overflow-y:auto">
<select id="select" style="width: 205px;">
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
<option>Some Value</option>
</select>
</div>
</div>
$("#select").chosen({ width: "200px", disable_search: false });
$(".dialog").dialog();
If you attempt to open the dropdown within the dialog, you'll notice that it's being clipped.
Is there a workaround for this issue?
Update: As previously mentioned, I need to keep the select inside the scrollable area, so removing the "overflow-y" attribute is not an option. There may be other controls following the select tag that don't fit in the outer div, hence the necessity of a scrollbar. To clarify what I'm aiming for, I have enhanced my example here: jsfiddle.net/olegbevz/083z9ctL/5.