Select2多选组件父容器换行时高度不更新问题排查与解决
解决Select2多选组件父容器选项换行时高度无法自动调整的问题
最近踩了个实打实的坑:Select2多选组件的父容器在选项换行后,高度死活没法自动适配,导致部分选中的选项被截断,显示不全。
折腾了好一阵才揪出根源:
- 一开始我用
Ctrl+F在旧CSS文件里搜相关样式,但在浏览器代码检查工具里居然没定位到这个限制样式 - 多亏Tayyab Khan提到的高度相关思路给了我启发,再加上Calvin Nunes建议补充代码片段缩小排查范围,终于找到问题所在——一段遗留代码里的强制固定高度设置:
/* 罪魁祸首就是这行带!important的样式 */ .select2-container { height: 34px !important; }
把这行代码注释掉之后,父容器的高度立刻就能随着选项换行自动调整了,问题直接完美解决!
补充下我们的技术栈:ASP.NET MVC 5 + Bootstrap v3.3.7,遇到同类问题的小伙伴可以优先排查有没有这类强制固定高度的样式在搞鬼。
内容的提问来源于stack exchange,提问作者Cristian Porto
相关产品推荐
相关产品推荐

