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');

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');

• javascript
• jquery
• html
• css
• jquery-chosen

• edited, also selects content init's via separate Ajax-Request and then chosen select updates. – Alex44 Commented Oct 2, 2014 at 10:01
• @Alex44 Can you provide your CSS too? – Fenistil Commented Oct 2, 2014 at 10:21
• Plz, post link on working site – Anon Commented Oct 2, 2014 at 10:31

4 Answers 4

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.

.mCSB_container {
overflow:visible !important;
}

Worked for me!!!

Try to replace your chosen with select2. It has more functionality, and should work in your situation.

This Code Worked for me:

   $(function () {
       $("#YourDropDownID").parent().css("overflow", "visible");
   })

This is useful when you do not know the class or id of the parent div/dialog