解决select2下拉栏错位问题

在有些情况下,比如页面中多个选择栏的情况下,使用select2插件会导致错位的问题
就像下面这样
解决select2下拉栏错位问题
本应出现在蓝框位置的,却跑到了红框的位置。
因为是相对位置问题,所以可以锁定在CSS。经过对CSS的排查,发现select2会为下拉框添加一个行内样式position:absolute;
解决select2下拉栏错位问题
下拉框设置absolute会导致下拉框位置是根据body进行定位的,而非根据当前视图窗口,因此就会导致错位。所以我们要对其进行修改,首先找到select2.js(或select2.min.js)
select2.js的话搜索absolute应该就可以看到,在4372行为dropdown设置了absolute
解决select2下拉栏错位问题
因此将这里改为fixed即可。
在select2.min.js中也是同样的操作,可以找到absolute
解决select2下拉栏错位问题
将其改为fixed即可。
至于fixed会不会导致下拉框跟随用户滚动的问题,因为select2**下拉框会使滚动失效,因此设置为fixed也没有问题。