解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题

[本文出自天外归云的博客园]

在使用bootstrap-table的extension——filter-control时(对应表格的data-filter-control="true",表头th的data-filter-control="select")

会遇到表头的select控件向上展开被遮挡显示不全的问题

解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题

 

这个问题这么解决,首先改下表的最小高度:

解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题

然后覆盖掉bootstrap的css dropdown-menu类,指定下拉框的最大高度:

.dropdown-menu {
        /*
        解决bootstrap表头filter-control select下拉框内容被遮挡显示不全的问题
        重写.dropdown-menu类的最大高度,同时配合调整table的style="min-height: 300px"
        */
        max-height: 200px !important;
}

这样就解决了被遮挡的问题,即使过滤完只有一条数据的情况也保证不会被遮挡:

解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题