Geek Answers Handbook

JQuery Selected Dropdown Cutout When Appears

I use jQuery "Selected drop-down lists" and have a problem when the drop-down menu appears inside a modal form, which it cuts and only partially displays, although the parent div for the selected select has the css property overflow: visible

enter image description here

Usually when I use the default selection without any style, it works well

enter image description here

Perhaps someone has the same problem 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');
+4
source share
3 answers

jQuery UI- , . , , script . , .

, jQuery UI:

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

: http://jsfiddle.net/e57gase7/

CSS , .

+9

select2. .

+1
.mCSB_container {
overflow:visible !important;
}

!!!

+1

More articles:


All Articles