JQuery "Chosen" dropdown cut when appearing

Question

I use JQuery "Chosen Dropdowns" plugin and have an issue that when dropdown appear inside modal form it cut's and show's only partially, although parent div for chosen select has css property overflow: visible

Normally, when I use default select without any styling it works good

Maybe someone has same issue or can provide any solution?

HTML:

<div class="addNewLicense" style="overflow:visible;">
<table>
    <tr>
        <td>
            <span>Start date: </span>
        </td>
        <td>
            <input type="text" id="startLicenseDate" placeholder="Start Date..." style="width: 200px; height: 24px;" />
        </td>
    </tr>
    <tr>
        <td>
            <span>End date: </span>
        </td>
        <td>
            <input type="text" id="endLicenseDate" placeholder="End Date..." style="width: 200px; height: 24px;" />
        </td>
    </tr>
    <tr>
        <td>
            <span>State Name: </span>
        </td>
        <td>
            <select id="stateLicenseSelect" style="width: 205px; height: 30px;">

            </select>
        </td>
    </tr>
</table>

Javascript:

    $("#stateLicenseSelect").chosen({ width: "200px", disable_search: true });
    $(".addNewLicense").dialog('open');

Answer 1

jQuery UI modals have overflow with hidden value by default, that to prevent any over sized object to leave the box boundaries. It won't crop the native UI controls from the browser because it would break user experience rules, but for script generated UI, it will. Chosen works replacing the select input elements with some absolute positioned elements that will be cut with overflow hidden.

To prevent this issue, you simply overwrite the overflow hidden property from jQuery UI:

.ui-dialog{
overflow: visible !important;
}

I made a quick example here: http://jsfiddle.net/e57gase7/

If you try removing the CSS in the example, it would look like your problem.