选择2打开下拉菜单后会创建一个大空间

Question

我使用如下选择：

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

.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;
}

 <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>

但是当打开下拉菜单时，会创建一个比实际页面大的右侧空间，如您在此处看到的那样 在打开下拉菜单之前

下拉菜单打开后

如何避免此类行为？

Answer 1

我无法重现您所描述的错误（请参阅片段）。

---

更新

该问题是由于单击下拉菜单时将

width: 100% !important;

设置为

select2-container

引起的。

解决方案1

添加以下 CSS：

html, body {
  overflow-x: hidden;
}

解决方案2

添加以下 CSS：

.select2-container {
  max-width: 335px;
}

Answer 2

尝试添加相对于 select2-container 父级的位置。 由于 select2-container 具有绝对位置，因此只有当父容器具有相对位置时，宽度才能正常工作。

希望它对你有用。 干杯