Select2打开下拉菜单后右侧出现多余空白的解决咨询

问题场景 #

我通过以下代码实现Select2多选下拉框：

JavaScript 代码 #

$(document).ready(function()
{
  $('.select2-multiple-choices').select2(
   {          
     placeholder: 'Select one or more fields'     
   });    
});

CSS 代码 #

.select2-selection--multiple:after
{
 content:"";
 position:absolute;
 right:10px;
 top:15px;
 width:0;
 height:0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 5px solid #888;
}   

.outer {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 30%;
padding-right: 30%;
background-color: #eee;
}

.select2-container
{
width: 100% !important;
}

HTML 代码 #

<div class="outer">
  <select class="select2-multiple-choices select2-choice" multiple="multiple" th:field="*{parameters}">
    <option th:each="option : ${searchoptions}" th:value="${option.getKey()}" th:text="${option.getValue()}"></option>
  </select>
</div>

但当下拉菜单打开时，页面右侧会出现超出实际页面范围的空白（下拉打开前页面正常，打开后右侧出现多余空白区域）。

解决方法 #

方法1：指定下拉菜单的父容器（推荐） #

修改Select2初始化代码，添加dropdownParent选项，将下拉菜单绑定到外层容器.outer，让下拉菜单在容器内定位，避免超出视口：

$(document).ready(function()
{
  $('.select2-multiple-choices').select2(
   {          
     placeholder: 'Select one or more fields',
     dropdownParent: $('.outer') // 绑定到外层容器
   });    
});

方法2：限制下拉菜单的最大宽度 #

通过CSS给Select2下拉菜单设置最大宽度为视口宽度，防止超出页面：

.select2-dropdown {
  max-width: 100vw;
  box-sizing: border-box;
}

方法3：调整外层容器的内边距为外边距 #

将.outer的左右内边距改为外边距，避免容器内宽度计算异常：

.outer {
padding-top: 40px;
padding-bottom: 40px;
margin-left: 30%;
margin-right: 30%;
background-color: #eee;
}

原因说明 #

出现右侧空白的核心原因是：Select2默认会把下拉菜单插入到body标签末尾，而非触发元素的父容器内。当外层容器设置了较大的左右内边距时，Select2计算下拉菜单位置时会出现偏差，导致菜单右侧超出视口，进而触发页面横向滚动条和空白区域。指定dropdownParent能让下拉菜单在容器内定位，从根源解决这个问题。

内容的提问来源于stack exchange，提问作者Discipulos