完美解决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第二章
Sep 30 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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扩展函数
2006/10/09 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
JsDom 编程小结
2011/08/09 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
js实现小时钟效果
2020/03/25 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python重试装饰器的简单实现方法
2019/01/31 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python同步windows和linux文件
2019/08/29 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
生产主管岗位职责
2013/11/10 职场文书
人事主管的岗位职责
2013/11/16 职场文书
家长通知书家长评语
2014/04/17 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
学校运动会开幕词
2016/03/03 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Python中22个万用公式的小结
2021/07/21 Python