解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题
[本文出自天外归云的博客园]
在使用bootstrap-table的extension——filter-control时(对应表格的data-filter-control="true",表头th的data-filter-control="select")
会遇到表头的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控件被遮挡显示不全的问题的更多相关文章
- vue和bootstrap的select控件貌似有冲突?
貌似vue和bootstrap的select控件会冲突,因为bootstrap的select控件会将option替换为<a>标签,这样就会导致vue渲染失败.(这个问题让我整了一个上午,最 ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- 针对Windows 64位系统中Matlab没有LED Control Activex控件的解决方法
Win 10 64bits系统中Matlab 64位软件没有LED Control Activex控件,LED ActiveX Control控件位于Gauges Blockset模块中,而Gauge ...
- Selenium webdriver 之select 控件封装,解决onchange问题
使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...
- 解决HTML select控件 设置属性 disabled 后无法向后台传值的方法
大家都知道有时候修改数据的时候我们希望有一些数据是不可以修改的,通常情况下我们会将input框设置为 readonly , 但是 select 控件没有这个属性,需要使用另一个属性 disabled ...
- IE6/7下Select控件Display属性无效解决办法
HTML的Select控件,C#的DropDownList服务器控件 设置父类型Display属性之后,在IE6/7上无效 直接将下段javascript脚本添加到页面中即可 <script t ...
- IE6下div层被select控件遮住的问题解决方法
Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...
- Matlab安装记录 - LED Control Activex控件安装
Matlab安装记录-LED Control Activex控件安装 2013-12-01 22:06:36 最近在研究Matlab GUI技术,准备用于制作上位机程序:在Matlab GUI的技术 ...
- js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 【Mysql异常】[HY000][1030] Got error 28 from storage engine
原因: 应该是磁盘空间不足导致 可通过 df -h 查看部署mysql的服务磁盘空间使用情况
- ansible-playbook安装zabbix_server,agent监控
主要完成通过playbook自动生成zabbix_server,agent,这里没有完全实现自动化,这里机器的获取还是需要人为手工填写,如果感兴趣想通过自动获取需要部署的机器可以通过namp扫描工具a ...
- Linux基础学习之基础命令(1)--2019-11-14
查看命令路径其他方法: which 命令: which [options] [--] programname [...] -a:显示所有匹配的程序文件,而非第一个: --skip-alias:略过别名 ...
- kuangbin专题专题四 Currency Exchange POJ - 1860
题目链接:https://vjudge.net/problem/POJ-1860 大致题意:有不同的货币,有很多货币交换点,每个货币交换点只能两种货币相互交换,有佣金C,汇率R. 每次交换算一次操作, ...
- web api .net C# mvc API返回XML文档的解析并取值
[HttpGet] public System.Net.Http.HttpResponseMessage GetNotify() { var xmlstring = @" <xml&g ...
- .net反射机制的简单介绍
1.什么是反射 Reflection,中文翻译为反射. 这是.Net中获取运行时类型信息的方式,.Net的应用程序由几个部分: ‘程序集(Assembly)’.‘模块(Module)’.‘类型(cl ...
- <?php return array(
<?php //test.php return array( 'name' => 'andy', 'sex' => 'male' ); ?> <?php $set = r ...
- SpringBoot整合Spring Data Elasticsearch
Spring Data Elasticsearch提供了ElasticsearchTemplate工具类,实现了POJO与elasticsearch文档之间的映射 elasticsearch本质也是存 ...
- Linux安装pycharm并添加图标到桌面
安装: 1.到pycharm官网下载Linux版本的pycharm包. 2.打开中端 cd到下载的文件夹,默认为 ~/Downloads/ 文件夹下 3.执行命令 tar -xvzf pycharm- ...
- 单片机模块化程序: 单片机加入JSON是个不错的选择
这节需要知道的知识点 https://www.cnblogs.com/yangfengwu/p/11685325.html 下载JSON文件: 链接: https://sourcefo ...