完美解决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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
详解vue路由
Aug 05 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
javascript new一个对象的实质
2010/01/07 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
浅谈node的事件机制
2017/10/09 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python线程指南分享
2019/11/19 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
animation和transition的区别
2020/10/12 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
三项教育活动实施方案
2014/03/30 职场文书
法人代表委托书
2014/04/04 职场文书
2014年政协工作总结
2014/12/09 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年教务工作总结
2015/05/23 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
oracle索引总结
2021/09/25 Oracle
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers