element中使用select组件,下拉框位置偏移的解决方法。
在项目中测试同学提出了新bug,窗口缩放会导致部分样式排版错乱。
于是,我是用min-width解决。
排版问题完美解决。然后不经意间一次测试却又发现了新问题。
缩放屏幕时,如果小于设置的min-width的值,body设置了hidden会隐藏超出的部分。
而你设置min-width的盒子是不会缩放的。
所以导致了,如果你点开下拉框的话,你会发现你的下拉框会随着屏幕的缩小而偏移。
这里就不上图了,请各位脑补。。。(因为上图的话,我还得把代码改回去)
那么如何解决呢?
使用element的中select的 popper-append-to-body 方法。 把他在代码中设为 popper-append-to-body=“false”
然后设置你需要的样式,他出现的位置就可以了。如果出现样式没有替换的话,记得加!important
;
然后就可以解决这个问题。
菜鸡成长之路,如果能帮助到您,十分欣慰。如有错误,也请海涵,欢迎指正。