我正在尝试实现用于显示下拉选项的选定插件。这是我尝试的方式,但我无法获得选项。实际上,它们正在可用,但它们在外部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({});
});
为#searchFilters .row
设置overflow:none
工作小提琴
试试这个
#searchFilters .row {
border:0px solid red;
margin-top:10px;
overflow:visible; //OR remove overflow property
}
演示
只需删除
overflow:auto
看看这个 http://jsfiddle.net/HZUeF/1/
删除 CSS overflow
属性:
小提琴
CSS:
#searchFilters .row {
border:0px solid red;
margin-top:10px;
/*overflow:auto;*/
}