关于select2高度自定义设置解决方案

关于select2高度自定义设置解决方案

在select2插件发布各版本中，官方并没有直接对select2高度属性做出设值问题，所以我们在使用中大部分就是它的默认高度。这样，就导致我们遇到如下情况：

• 问题描述
• 问题分析
• 问题解决
• 注意事项

---

问题描述

• 纵向表单存在多个 select2 控件高度会加倍缩小，导致上下之间的间隙空间过大，这对于细节要求较高的用户视觉观明显拉开，效果如图：
  

问题分析

select2并没有提供高度解决方案，那么我们不妨自己动手找原因。利用浏览器样式进行调试，发现 .select2-selection--single属性高度正是被设置为28px高度，这正是官方设置的高度呀！！！

问题解决

既然找到原因，那么处理起来就简单了，手动修改.select2-selection--single样式高度值即可，代码如下。

<style type="text/css">
    .select2-container .select2-selection--single{  
      height:34px;  
      line-height: 34px;  
    }  
</style>

实现效果，如图：

注意事项

1、楼主使用select2为4.0.5，不同版本可能设置的属性值不一样，关键是手动去调试找到被官方控制的那个高度值地方即可。