解决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/ ...
随机推荐
- scrapy框架之代理的使用
首先我们检测ip是否可用: 1.对于免费代理的检测 #免费代理或不用密码的代理 url = 'http://httpbin.org/get' proxy = '127.0.0.0:8000' prox ...
- C++学习(9)—— 对象的初始化及清理
1. 构造函数和析构函数 对象的初始化和清理是两个非常重要的安全问题 一个对象或者变量没有初始状态,对其使用后果是未知 同样的使用完一个对象或者变量,没有及时清理,也会造成一些安全问题 C ...
- vue 项目中安装npm--save-dev 和 --save 命令
在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...
- python基础知识笔记-集合
集合使用花括号将元素之间用逗号隔开即可.集合的输出里不会出现相同的元素.集合中有并集.交集.差集等,以下为一些简单的表达: def main(): list1=[1,1,2,2,3,3] print( ...
- LOJ6070 基因
基因 给定一个长度为 \(n\) 的字符串 \(s\),有 \(q\) 组询问,每个询问给定 \(l,r\),询问 \(s[l..r]\) 中有多少本质不同的回文子串. 强制在线.\(n\leq 10 ...
- Servlet/Tomcat/ Spring 之间的关系
0.基础知识 在idea中打开servlet的源码: 可以看见servlet就是一个接口:接口就是规定了一些规范,使得一些具有某些共性的类都能实现这个接口,从而都遵循某些规范. 有的人往往以为就是se ...
- python的虚拟环境管理工具venv使用方法介绍及与nodejs的包管理方式对比
一.nodejs 包管理方式 我们知道, nodejs的包管理工具npm可以安装项目所需要的包,安装方法及区别如下: npm i module_name -g 全局安装 npm i module_na ...
- MYSQL中group_concat( )函数中参数的排序方法
使用mysql中的group_concat( )函数连接指定字段时,可以先对该字段进行排序. PS:是因为二刷mysql的51道题的第12题遇到的:查询和" 01 "号同学学习的课 ...
- 压缩、解压命令——gzip、gunzip、tar、zip、bzip2
1.gzip命令与gunzip命令(压缩解压文件): (1)gzip——压缩: 利用touch命令创建一个文件,并向里面写入内容: 对创建的文件进行压缩: (2)解压缩gzip -d或gunzip: ...
- ent 基本使用十三 debug 模式
ent 生成的代码client 包中包含了一个方便的方法Debug(), 记得昨天我为了查看生成的sql 查询通过配置mysql 启用慢查询,同时设置记录慢查询为0,实际上client Debug 方 ...