我希望Multiselect Dropdown像常规选择一样浮动在其容器(滚动div)上。
我尝试更改div溢出选项,但这会导致div中的其他元素行为不正确(即,它们显示而不是触发滚动)。
该问题以前已被完全暴露:
Multiselect Dropdown z-index not working inside a scroll container div
...但是作者对似乎摆脱了溢出的答案感到满意。
我对上一个链接的代码做了一些修改,在所有内容下面添加了第二个常规选择。必须在div向下滚动时显示它,而multiselect则应浮动在上面,而忽略溢出设置。
有可能吗?
下面是代码(95%只是上面帖子的副本):
http://jsfiddle.net/danielnh/1pwLncmr/2/
#scrollMe {
height:150px;
background-color:yellow;
overflow-y: scroll;
overflow-x:hidden;
padding:20px;
}
..
<div id="scrollMe" class="col-md-12">
<select id="multiSelect" class="form-control multiselect" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<br>
<select class="form-control">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br><br><br>
<select class="form-control">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
答案 0 :(得分:1)
div选项必须为固定位置或绝对位置,以便忽略溢出。
下面看一下并阅读注释,我在Multiselect
函数中添加了两行代码。
$('#multiSelect').multiselect({
includeSelectAllOption: true,
buttonWidth: '200px',
}).parent().find(".dropdown-toggle").click(function(){
// MyCode
// handle the position of the fixed div
var offSet = $(this).offset();
$(this).parent().find(".multiselect-container").css({
position:"fixed",
top:offSet.top + $(this).outerHeight(),
left: offSet.left
});
});