解决select2下拉栏错位问题

在有些情况下,比如页面中多个选择栏的情况下,使用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也没有问题。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值