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

Question

我的ASP.NET页面中的select2下拉列表的宽度有问题.当我尝试使用设备的Chrome模拟器屏幕查看页面时,select2大于包含的div,而在右侧它会离开屏幕.我看到代码检查它自动添加了一个我没有在任何地方设置style="width: 498px;"的<span class="select2 select2-container select2-container--bootstrap select2-container--below">元素中的样式属性.我做的唯一操作是$("#ContentPlaceHolderContent_mySelect").select2();在document.ready函数()中设置.我的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; }

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