完美解决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游戏之优化篇
Nov 08 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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 memcache扩展的三种安装方法
2009/04/26 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php 团购折扣计算公式
2011/11/24 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
phplot生成图片类用法详解
2015/01/06 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php输出形式实例整理
2020/05/05 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
js密码强度校验
2015/11/10 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python3.9新特性详解
2020/10/10 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
SQL Server面试题
2016/10/17 面试题
微笑面对生活演讲稿
2014/09/23 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
社区党支部承诺书
2015/04/29 职场文书
党员违纪检讨书
2015/05/05 职场文书
企业计划生育责任书
2015/05/09 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers