完美解决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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP has encountered an Access Violation
2007/01/15 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
工程造价专业大学生自荐信
2013/10/01 职场文书
自我评价格式
2014/01/06 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
大学生求职自荐信
2015/03/24 职场文书
通知范文怎么写
2015/04/16 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
python 学习GCN图卷积神经网络
2022/05/11 Python