引导多重选择:如果使用溢出-y，则下拉列表位于外部容器下方

Question

我正在使用引导多选(链接(...当外部容器有溢出-y：滚动和最大高度...多选的下拉列表消失。如何让它显示在过滤器容器上？

.HTML：

<div class="container filter-container">    
 <div class="row">
  <div class="col-md-12 search-box">          
      <div class="col-md-12">
        <form role="form-inline">
          <div class="form-group search-form-group">
            <label class="search-label">Users:</label>
            <div class="mid-width">
              <select class="select-users form-control"></select>
            </div>
          </div>
        </form>    
      </div>                                                                                        
  </div>  
 </div>  
</div>  

.CSS：

.filter-container {
    padding: 1%;
    border: 1px solid #eee;
    max-height: 100px;
    overflow-y: scroll;
    background-color: #f8f8f8;
}

.JS：

$(document).ready(function() {
  $('.select-users').multiselect({
        maxHeight: 400,
        buttonWidth: '100%' 
    });
    var accounts = [
        { label: 'UserID 1', value: '1' },
        { label: 'UserID 2', value: '2' },      
        { label: 'UserID 3', value: '3' }, 
        { label: 'UserID 4', value: '4' },         
        { label: 'All', value: '' }  
        ];  
    $('.select-users').multiselect('dataprovider', accounts);  
});

小提琴

我认为这也 https://github.com/davidstutz/bootstrap-multiselect/issues/382 解决了这个问题。

Answer 1

在 css 中添加一个类

.multiselect-container {
  position:relative;
}

小提琴

Answer 2

试试这个

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

在示例下点击