select2 没有响应，宽度大于容器答案

【问题标题】：select2 not responsive, width larger than containerselect2 没有响应，宽度大于容器
【发布时间】：2017-12-29 19:32:56
【问题描述】：

我的 ASP.NET 页面中的 select2 下拉菜单的宽度有问题。当我尝试使用设备屏幕的 Chrome 模拟器查看页面时，select2 比包含的 div 大，并且在右侧它超出了屏幕。我通过代码检查看到它在<span class="select2 select2-container select2-container--bootstrap select2-container--below"> 元素中自动添加了一个样式属性style="width: 498px;"，我没有在任何地方设置。我所做的唯一操作是在 document.ready 函数() 中设置$("#ContentPlaceHolderContent_mySelect").select2();。我的 select2 下拉列表包含在一个块中：

<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>

如何删除 style="width" 选项？

【问题讨论】：

将其初始宽度设置为 100% 应该可以解决这个问题$('#mySelect').select2({ width: '100%' });
@LarsBeck 此评论应标记为最佳答案：-P

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

Select2 添加类.select2。您可以使用 css 覆盖脚本所做的事情。在这里，我将 select2 设置为 100% width，使用 !important。如果我不这样做，select2 将有 24px 宽度。

您可以进一步自定义select2使用某些原理生成的其他类。

$(document).ready(function(){
$("#mySelect").select2();
});

.select2 {
width:100%!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>

【讨论】：

【解决方案2】：

这对我有用：

$('select').select2({
    width: '100%'
});

并添加 CSS：

.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }

如果需要，添加到 CSS “!important”。

【讨论】：

我什至不需要 CSS。仅在 select2 初始化中设置选项就足够了。

【解决方案3】：

如果您使用的是引导程序，请使用以下样式

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

【讨论】：

【解决方案4】：

尝试使用 dropdownParent

$('#mySelect2').select2({
  dropdownParent: $('#myModal')
});

https://select2.org/dropdown#dropdown-placement

【讨论】：

【解决方案5】：

会溢出吗？ 也可以用 JS 来做

如果某些元素具有溢出属性，使用 CSS width:100% 有时会出现滚动问题。我也建议使用 js。

在js下面添加

 $('select').select2({
        width: '100%'
 });

在CSS下面添加

.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }

/*从已经给出的复制:) */

【讨论】：

【解决方案6】：

带有.select2 类的<span> 由Select2 插件在给定<select> 创建新的select2 之后创建。

为了让这个span.select2元素响应，我们可能有一些可能，比如：

使用 % 宽度（在创建 select2 元素之前的原始上，或在 select2 width 配置选项中）。
通过 CSS 覆盖（例如，当我们使用 @media() 查询时）。请注意，这可能会影响插件的功能或显示。

对于第二个，我们可以在宽度值上使用adjacent sibling combinator (+) 和!important 来设置我们select2 的<span> 的样式，因为通常在我们的@ 之后创建并插入select2 的跨度987654331@.

以下示例：

@media (max-width: 400px) {
  select.my-x-select + span.select2 {
    width: 200px !important;
  }
}

注意： select 和 span 元素选择器不是必需的，@media 作为示例用例。

【讨论】：

对反对票的反馈？ !important 出现了吗？

【解决方案7】：

你不需要使用!important，你可以用max-width覆盖它，比如：

.select2{
    max-width: 100%;
}

【讨论】：

【解决方案8】：

首先在select标签中添加Select2类.select2并使用这些CSS

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

【讨论】：