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

Question

我的 ASP.NET 页面中 select2 下拉列表的宽度有问题。当我尝试使用设备屏幕的 Chrome 模拟器查看页面时，select2 比包含的 div 大，并且在右侧它超出了屏幕。我通过代码检查看到它在我没有在任何地方设置的

style="width: 498px;"

元素中自动添加了一个样式属性

<span class="select2 select2-container select2-container--bootstrap select2-container--below">

。我做的唯一操作是在 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" 选项？

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

Answer 2

这对我有用：

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

并添加 CSS：

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

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

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

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

Answer 4

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

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

Answer 5

尝试使用 dropdownParent

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

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

Answer 6

你不需要使用

!important

，你可以用

max-width

覆盖它，比如：

.select2{
    max-width: 100%;
}

Answer 7

具有

<span>

类的

.select2

是由Select2插件在给定的

<select>

上创建新的select2之后创建的。

要让这个

span.select2

元素响应，我们可能有一些可能，比如：

1. 使用 % 宽度（在创建 select2 元素之前的原件上，或在 select2 width 配置选项中）。
2. 通过 CSS 覆盖（例如当我们使用

   @media()

   查询时）。请注意，这可能会影响插件的功能或显示。

对于第二个，我们可以使用 adjacent sibling combinator (

+

) 和宽度值上的

!important

来设置我们的 select2 的

<span>

的样式，因为通常 select2 的跨度是在我们的

 之后创建和插入的<select>

.

下面的例子：

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

注意：不需要

select

和

span

元素选择器，

@media

作为示例用例。

Answer 8

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

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