Question

我的ASP.NET页面中的select2下拉列表的宽度有问题。当我尝试使用设备的Chrome模拟器屏幕查看页面时，select2大于包含的div，而在右侧它会离开屏幕。我看到代码检查它自动添加了style="width: 498px;"元素中的样式属性<span class="select2 select2-container select2-container--bootstrap select2-container--below">，我没有在任何地方设置。我所做的唯一操作是在document.ready function（）中设置$("#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覆盖脚本执行的操作。在这里，我使用100% width将select2设置为!important。如果我不这样做，那么select2将有24px的宽度。

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

＆＃13;

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

＆＃13;

.select2 {
width:100%!important;
}

＆＃13;

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

＆＃13;

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

尝试使用 dropdownParent

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

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

Answer 4

如果您正在使用bootstrap，请使用以下样式

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

Answer 5

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

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

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

对于第二个，我们可以使用宽度值为+的{{3}}（!important）来设置我们的select2的<span>，因为通常是select2的跨度在我们<select>之后创建并插入。

以下示例：

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

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

Answer 6

您无需使用!important，只需使用max-width覆盖它即可，例如：

.select2{
    max-width: 100%;
}

Answer 7

溢出？ 也用 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; }

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

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

7 个答案: