Select2不响应，宽度大于容器

Question

我在ASP.NET页面中遇到了select2下拉菜单宽度的问题。当我尝试用设备屏幕的Chrome模拟器查看页面时，select2比包含它的div更大，在右边超出了屏幕。通过代码检查，我发现它自动在元素中添加了一个样式属性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" 选项？

- Alfredo Torre

---

将其初始宽度设置为100％应该可以解决此问题 $('#mySelect').select2({ width: '100%' });。 - Lars Beck

@LarsBeck 这个评论应该被标记为最佳答案 :-P - Pathros

Answer 1

Select2添加了.select2类。您可以使用CSS覆盖脚本的默认设置。

这里我将设置为使用!important时具有 100%宽度，如果不设置，它将只有24像素宽度。

您还可以使用一些原则来进一步自定义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>

- Vlado Pandžić

Answer 2

这对我有效：

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

并添加CSS：

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

如果需要，可以在 CSS 中添加“!important”。

- wp-mario.ru

---

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

Answer 3

遇到溢出问题？ 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; }

很高兴为您服务！下面是您需要翻译的内容：

/*已经给出的复制*/

- Sonal Prajapati

Answer 4

尝试使用dropdownParent。

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

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

- Ahmet Çetintaş

Answer 5

首先，在选择标签中添加Select2类.select2，并使用以下CSS。

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

- Shahzad Ishaq

Answer 6

如果你正在使用Bootstrap，可以使用以下样式：

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

- Ali

Answer 7

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

.select2{
    max-width: 100%;
}

- gdfgdfg

Answer 8

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

为了使这个 span.select2 元素具有响应性，我们可能有一些可能性，例如：

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

对于第二种情况，我们可以使用 相邻兄弟组合器（+）与宽度值上的 !important 来样式化我们的 select2 的 <span>，因为通常 select2 的 span 是在我们的 <select> 右侧创建并插入的。

下面是一个示例：

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

注意：不需要使用选择器 select 和 span 元素，@media 是一个示例用例。

- edmundo096

---

负面投票的反馈？是因为使用了!important吗？ - edmundo096