完美解決iview 的select下拉框選項錯位的問題
更新時間：2018年03月02日 15:24:11 作者：njueyupeng
下面小編就為大家分享一篇完美解決iview 的select下拉框選項錯位的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在使用iview的過程中，我遇到這樣一個問題，在Model中使用select下拉框組件。但是當(dāng)彈出框超過一屏需要滾動時，select的下拉選項會出現(xiàn)錯位（下圖1為正常，圖2為滾動后，下拉選項錯位。）
圖1：
圖2：
在分析組件代碼后，發(fā)現(xiàn)以下一個樣式：
.ivu-modal .ivu-select-dropdown {
position: absolute !important;
}
解決方案
正是這個樣式影響了下拉框的定位，解決的方式是覆蓋作者的原來樣式。
但是，很不巧的是，作者加了一個 !important ,改變了優(yōu)先級。
那么，如何讓自己的樣式優(yōu)先級比他高呢，可以在自定義的樣式文件里加入這樣的樣式：
body .ivu-modal .ivu-select-dropdown{
position: fixed !important;
}
這樣就解決了上述提到的問題。關(guān)于為什么加個body，就能改變樣式的優(yōu)先級，可以參照我的博客相關(guān)文章（how2js.cn）
以上這篇完美解決iview 的select下拉框選項錯位的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vite2.0+vue3移動端項目實戰(zhàn)詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法
今天小編就為大家分享一篇vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了關(guān)于vue-tree-chart簡單的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
在Vue里渲染一塊內(nèi)容，會有四個流程步驟，那么該怎么理解這個流程呢，所以本文就給大家詳細講解一下Vue 渲染流程，文中有纖細的代碼示例供大家參考,需要的朋友可以參考下2023-07-07
vue綁定數(shù)字類型 value為數(shù)字的實例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目中我們可以通過行內(nèi)樣式進行動態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
基于Vue3+TypeScript的全局對象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用，需要的朋友可以參考下2022-09-09