解決select2下拉欄錯位問題

2021-10-09 20:08:21 字數 712 閱讀 2188

在有些情況下,比如頁面中多個選擇欄的情況下,使用select2外掛程式會導致錯位的問題

就像下面這樣

本應出現在藍框位置的,卻跑到了紅框的位置。

因為是相對位置問題,所以可以鎖定在css。經過對css的排查,發現select2會為下拉框新增乙個行內樣式position:absolute;

下拉框設定absolute會導致下拉框位置是根據body進行定位的,而非根據當前檢視視窗,因此就會導致錯位。所以我們要對其進行修改,首先找到select2.js(或select2.min.js)

select2.js的話搜尋absolute應該就可以看到,在4372行為dropdown設定了absolute

因此將這裡改為fixed即可。

在select2.min.js中也是同樣的操作,可以找到absolute

將其改為fixed即可。

至於fixed會不會導致下拉框跟隨使用者滾動的問題,因為select2啟用下拉框會使滾動失效,因此設定為fixed也沒有問題。

select2 下拉列表外掛程式

如何使用select2?1.1 通過cdn引用 將以下兩行 新增到html頁面,即完成了select2的引入 注意 還需引入jquery支援select2的使用 1.2 通過離線引用 1.2.1 引入js資源庫 因此引入路徑為 js select2.min.js 1.2.2 引入css樣式 sele...

select2 下拉載入 分頁資料

這篇博文 注釋寫的比較詳細,不過他做了很多修改 這個也可以看看 首先,頁面上引入jquery,和select2 頁面上寫好select js 獲取url中的引數 function geturlparam name var userid geturlparam userid circleid sele...

select2 超好用的下拉列表

rails 自帶的下拉列表不好用,效果一般,流行的 select2 就好用多了。從 rails5.1 版本開始,gemfile 預設不再安裝gem jquery rails 無法正常使用 select2,解決方法如下 在gemfile加入gem jquery rails 終端bundle insta...