完美解决iview 的select下拉框选项错位的问题
更新时间：2018年03月02日 15:24:11 作者：njueyupeng
下面小编就为大家分享一篇完美解决iview 的select下拉框选项错位的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在使用iview的过程中，我遇到这样一个问题，在Model中使用select下拉框组件。但是当弹出框超过一屏需要滚动时，select的下拉选项会出现错位（下图1为正常，图2为滚动后，下拉选项错位。）
图1：
图2：
在分析组件代码后，发现以下一个样式：
.ivu-modal .ivu-select-dropdown {
position: absolute !important;
}
解决方案
正是这个样式影响了下拉框的定位，解决的方式是覆盖作者的原来样式。
但是，很不巧的是，作者加了一个 !important ,改变了优先级。
那么，如何让自己的样式优先级比他高呢，可以在自定义的样式文件里加入这样的样式：
body .ivu-modal .ivu-select-dropdown{
position: fixed !important;
}
这样就解决了上述提到的问题。关于为什么加个body，就能改变样式的优先级，可以参照我的博客相关文章（how2js.cn）
以上这篇完美解决iview 的select下拉框选项错位的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
今天小编就为大家分享一篇Vue通过ref父子组件拿值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最近工作中遇到了npm run dev报错这个问题,通过查找相关资料最终解决了,所以下面这篇文章主要给大家介绍了关于npm run dev失败的详细解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-09-09
以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
element-ui中el-input只输入数字(包括整数和小数)
开发中有时候需要input只能输入数字,下面这篇文章主要给大家介绍了关于element-ui中el-input只输入数字(包括整数和小数)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本文将利用Vue+TailWindcss实现一个简单的闯关小游戏，玩家须躲避敌人与陷阱到达终点且拥有多个关卡，感兴趣的小伙伴可以了解一下2022-04-04
这篇文章主要介绍了Ant Design的可编辑Tree的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
Vue3使用transition组件改变DOM属性的方式小结
这篇文章主要为大家详细介绍了Vue3中使用transition组件改变DOM属性的常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要介绍了关于vue-tree-chart简单的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论