浮动选择不显示选择的 Jquery 插件的选择选项



我正在尝试实现用于显示下拉选项的选定插件。这是我尝试的方式,但我无法获得选项。实际上,它们正在可用,但它们在外部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;*/
}

最新更新