Javascript select2 不响应，宽度大于容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45276778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select2 not responsive, width larger than container
提问by Alfredo Torre
I have a problem with the width of a select2 dropdown in my ASP.NET page. When I try to view the page with the Chrome emulator of devices screen, the select2 is larger than the containing div, and on the right it goes out of the screen. I saw with code inspection that it adds automatically a style attribute style="width: 498px;"in the <span class="select2 select2-container select2-container--bootstrap select2-container--below">element that I did not set anywhere. The only operation that I did is to set $("#ContentPlaceHolderContent_mySelect").select2();in the document.ready function(). My select2 dropdown is contained in a block:
我的 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 function() 中进行设置。我的 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>
How can I remove that style="width" option?
如何删除该 style="width" 选项？
回答by Vlado Pand?i?
Select2 adds class .select2. You can override what script does using css.
Here I'm set select2 to have 100% width, using !important. If I would not do that select2 would have 24px width.
Select2 添加类.select2。您可以使用 css 覆盖脚本的作用。在这里，我将 select2 设置为 have 100% width，使用!important. 如果我不这样做， select2 将有 24px 宽度。
You can further customize other classes that select2generates using some principle.
您可以进一步自定义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>回答by Mario62RUS
This works for me:
这对我有用：
$('select').select2({
width: '100%'
});
and add CSS:
并添加 CSS：
.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }
Add to CSS "!important" if you need.
如果需要，添加到 CSS "!important"。
回答by gdfgdfg
You don't need to use !important, you just can override it with max-widthlike:
你不需要使用!important，你可以用max-width像覆盖它：
.select2{
max-width: 100%;
}
回答by edmundo096
The <span>with the .select2class is created by the Select2 plugin just after creation a new select2 on a given <select>.
在<span>与.select2类由选择二插件刚创建后在给定的一个新选择2创建<select>。
To make this span.select2element responsive, we may have some possibilities, such as:
为了使这个span.select2元素具有响应性，我们可能有一些可能性，例如：
- Use a % width (either on the original before creating the select2 element, or in the select2 widthconfiguration option).
- Override via CSS (for example when we use
@media()queries). Note that this may affect the plugin's functionality or display.
- 使用 % 宽度（在创建 select2 元素之前的原始上，或在 select2宽度配置选项中）。
- 通过 CSS 覆盖（例如，当我们使用
@media()查询时）。请注意，这可能会影响插件的功能或显示。
For the 2nd one, we can use the adjacent sibling combinator(+) with the !importanton the width value to style our select2's <span>, since normally the select2's span is created and inserted right after our <select>.
对于第二个，我们可以使用相邻的兄弟组合器( +) 和!important宽度值来设置我们的 select2 的样式<span>，因为通常 select2 的跨度是在我们的<select>.
An example below:
下面是一个例子：
@media (max-width: 400px) {
select.my-x-select + span.select2 {
width: 200px !important;
}
}
Note:selectand spanelement selectors aren't needed, @mediaas an example use case.
注意：作为示例用例，不需要select和span元素选择器@media。
