完美解决iview 的select下拉框选项错位的问题


Posted in Javascript onMarch 02, 2018

在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件。但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位。)

图1:

完美解决iview 的select下拉框选项错位的问题

图2:

完美解决iview 的select下拉框选项错位的问题

在分析组件代码后,发现以下一个样式:

.ivu-modal .ivu-select-dropdown {
  position: absolute !important;
}

解决方案

正是这个样式影响了下拉框的定位,解决的方式是覆盖作者的原来样式。

但是,很不巧的是,作者加了一个 !important ,改变了优先级。

那么,如何让自己的样式优先级比他高呢,可以在自定义的样式文件里加入这样的样式:

body .ivu-modal .ivu-select-dropdown{
 position: fixed !important;
}

这样就解决了上述提到的问题。关于为什么加个body,就能改变样式的优先级,可以参照我的博客相关文章(how2js.cn)

以上这篇完美解决iview 的select下拉框选项错位的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
javascript学习之闭包分析
Dec 02 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
PassWord输入框代码分享
Jun 07 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
vue element-ui table表格滚动加载方法
Mar 02 #Javascript
浅谈React组件之性能优化
Mar 02 #Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 #Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 #Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 #Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 #Javascript
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Python continue语句用法实例
2014/03/11 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python容器类型公共方法总结
2020/08/19 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
会计毕业生自荐信
2013/11/21 职场文书
社会实践感言
2014/01/25 职场文书
审计班子对照检查材料
2014/08/27 职场文书
绿色校园广播稿
2014/10/13 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
python数字类型和占位符详情
2022/03/13 Python
Java的Object类的九种方法
2022/04/13 Java/Android