bootstrap-select 模态窗口下 select选项被遮挡(显示不全)的问题解决办法

在模态窗口中该插件的下拉选项会被输入框遮挡,现给bootstrap-select控件绑定事件,当控件完全加载后设置 控制下拉框的 最小高度的属性,具体值请自行调试。

并且给输入搜索框绑定输入事件,做同样的处理。

本处理方式还有一个问题,假如删除搜索值重新搜索,就又被挡住了。重新点击下拉框按钮可以完全显示,由于不太影响使用,所以暂时不研究了。

HTML

 <select id="queryVlan" class="selectpicker form-control" name="vlan"  data-live-search="true" > 
                                            <option value='' selected>所有</option>
                                        </select>

JS

$("#queryVlan").on('shown.bs.select',function(e){
    $('.dropdown-menu').css('min-height',300);
    $('.dropdown-menu').css('transform','translate3d(0px, 29px, 0px)');
    $('#queryVlan').parent().find("input").keydown(function(){
        $('.dropdown-menu').css('min-height',240);
        $('.dropdown-menu').css('transform','translate3d(0px, 29px, 0px)');
        console.log('hahahah');

    })
})

 

posted @ 2019-05-20 11:22  迷神图卷  阅读(4132)  评论(0编辑  收藏  举报