Bootstrap-Multiselect:如果使用溢出-y，则下拉列表将低于外部容器

multiselect

关注

发信

关注(28)粉丝(399)

Bootstrap-Multiselect:如果使用溢出-y，则下拉列表将低于外部容器

本文介绍了Bootstrap-Multiselect:如果使用溢出-y，则下拉列表将低于外部容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap-Multiselect (link) ...当外部容器有一个溢出-y:滚动和一个最大高度......多选的下拉菜单消失了.如何让它显示在过滤器容器上?

HTML:


<div class="row"><div class="col-md-12 搜索框"><div class="col-md-12"><form role="form-inline"><div class="form-group search-form-group"><label class="search-label">用户:</label><div class="mid-width"><select class="select-users form-control"></select>

</表单>

CSS:

.filter-container {填充:1%；边框:1px 实心 #eee;最大高度:100px；溢出-y:滚动；背景色:#f8f8f8；}

JS:

$(document).ready(function() {$('.select-users').multiselect({最大高度:400，按钮宽度:'100%'});var 帐户 = [{标签:'用户ID 1'，值:'1'}，{标签:'用户ID 2'，值:'2'}，{标签:'用户ID 3'，值:'3'}，{标签:'用户ID 4'，值:'4'}，{标签:'全部'，值:''}];$('.select-users').multiselect('dataprovider', accounts);});

小提琴

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

解决方案

试试这个

<option>芥末</option><option>番茄酱</option><option>Relish</option></选择>

下例点击

I'm using Bootstrap-Multiselect (link) ... when the outer container has a overflow-y: scroll and a max-height ... the dropdown of the multiselect disappears. How can I get it to be displayed over filter-container?

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);  
});

Fiddle

I think this https://github.com/davidstutz/bootstrap-multiselect/issues/382 addresses the issue as well.

解决方案

Try this one

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

under example click

这篇关于Bootstrap-Multiselect:如果使用溢出-y，则下拉列表将低于外部容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-10 19:50