记select下拉框的一个样式bug

发表于 | 分类于 | | 阅读次数:
字数统计: 147 字 | 阅读时长 ≈ 1 分钟

在页面高度过大存在滚动条时，使用iView的Select、DatePicker、Dropdown组件，下拉框会产生遮挡。

定位问题

发现当select-dropdown超出页面时，会自动添加一个x-out-of-boundies属性，这时top会变成auto

解决办法

改变iview默认样式，用v-scoped方法（或其他方法），top：30px ！important

1
class="selectRowOne" v-scoped
1
2
3
.selectRowOne .ivu-select-dropdown {
  top: 34px !important;
}

效果：

改变iView默认样式参加改变iView默认样式的方法

优化

  1. 可以把这段css写在全局样式里。
  2. 同时解决了DatePicker、Dropdown的同样问题