Question

我正在尝试实施Chosen plugin来显示下拉选项。这是我尝试的方式，但我无法获得选项。实际上，它们正在变得可用，但它们在外部div中溢出，我必须滚动div。这是jsFiddle - http://jsfiddle.net/HZUeF/。

<div id="searchFilters" style="width:100%;">
    <div class="row">
        <div class="column" style="width:19%">
            <span class="filter-header">Select 1</span>
            <select id="select1" class="chosen-select" multiple>
              <option value="28">Option 1</option>
              <option value="90">Option 2</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="column" style="width:16%">
            <span class="filter-header">Select 2</span>
            <select id="select2">
              <option value="28">Option 1</option>
              <option value="90">Option 2</option>
              <option value="95">Option 3</option>
            </select>
        </div>
    </div>
</div>

body {
    font:12px 'Verdana';
}

#searchFilters tr tr{
     padding-bottom: 1em;
}
#searchFilters {
    border:0px solid black;
}

#searchFilters .row {
    border:0px solid red;
    margin-top:10px;
    overflow:auto;
}

#searchFilters .column {
    border:0px solid blue;
    padding:0px;
    background-color:#0099CC;
}

#searchFilters .filter-header {
    border:0px solid black;
    display: inline-block;
    font-weight: bold;
    padding-left:10px;
    vertical-align: middle;
    color: black;
    margin:5px 0px 3px 0px;
}

#searchFilters .column select {
    width:100%;
    margin:0px;
}

$(function() {
    $("#select1").chosen({});
    $("#select2").chosen({});   
});

Answer 1

为overflow:none

设置#searchFilters .row

<强> Working Fiddle

Answer 2

试试这个

#searchFilters .row {
    border:0px solid red;
    margin-top:10px;
    overflow:visible; //OR remove overflow property
}

DEMO

Answer 3

只需删除

 overflow:auto

查看此http://jsfiddle.net/HZUeF/1/

Answer 4

删除CSS overflow属性：

Fiddle

<强> CSS ：

#searchFilters .row {
    border:0px solid red;
    margin-top:10px;
    /*overflow:auto;*/
}

Floated选择不显示选择Jquery插件的选项

4 个答案: