CSS 设置 select2 输入的宽度（通过 Angular-ui 指令）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12683907/
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
set the width of select2 input (through Angular-ui directive)
提问by bsr
I have problem making this plunkr (select2 + angulat-ui) work.
我在使这个 plunkr (select2 + angulat-ui) 工作时遇到问题。
http://plnkr.co/edit/NkdWUO?p=preview
http://plnkr.co/edit/NkdWUO?p=preview
In local setup, I get the select2 work, but I cannot set the width as described in the docs. It is too narrow to be used.
在本地设置中，我得到了 select2 工作，但我无法按照文档中的描述设置宽度。它太窄而无法使用。
Thank you.
谢谢你。
EDIT: Never mind that plnkr, I found a working fiddle here http://jsfiddle.net/pEFy6/
编辑：别介意 plnkr，我在这里找到了一个工作小提琴 http://jsfiddle.net/pEFy6/
It looks like it is the behavior of select2 to collapse to the width of first element. I could set the width through bootstrap class="input-medium".Still not sure why angular-ui doesn't take config parameters.
看起来折叠到第一个元素的宽度是 select2 的行为。我可以通过 bootstrap 设置宽度。class="input-medium"仍然不确定为什么 angular-ui 不采用配置参数。
回答by portforwardpodcast
In my case the select2 would open correctly if there was zero or more pills.
在我的情况下，如果有零个或多个药丸，select2 将正确打开。
But if there was one or more pills, and I deleted them all, it would shrink to the smallest width. My solution was simply:
但是如果有一颗或多颗药丸，我把它们都删除了，它会缩小到最小的宽度。我的解决方案很简单：
$("#myselect").select2({ width: '100%' });
回答by Diego Alvarez
You need to specify the attribute width to resolve in order to preserve element width
您需要指定要解析的属性宽度以保留元素宽度
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
回答by Shep
This is an old question but new info is still worth posting...
这是一个老问题，但新信息仍然值得发布......
Starting with Select2 version 3.4.0 there is an attribute dropdownAutoWidthwhich solves the problem and handles all the odd cases. Note it is not on by default. It resizes dynamically as the user makes selections, it adds width for allowClearif that attribute is used, and it handles placeholder text properly too.
从 Select2 版本 3.4.0 开始，有一个属性dropdownAutoWidth可以解决问题并处理所有奇怪的情况。请注意，默认情况下它不是打开的。当用户进行选择时，它会动态调整大小，allowClear如果使用该属性，它会增加宽度，并且它也可以正确处理占位符文本。
$("#some_select_id").select2({
dropdownAutoWidth : true
});
回答by Sadee
select2 V4.0.3
选择2 V4.0.3
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
回答by sobelito
With > 4.0 of select2 I am using
使用 > 4.0 of select2 我正在使用
$("select").select2({
dropdownAutoWidth: true
});
These others did not work:
这些其他人没有工作：
- dropdownCssClass: 'bigdrop'
- width: '100%'
- width: 'resolve'
- dropdownCssClass: 'bigdrop'
- 宽度：'100%'
- 宽度：'解决'
回答by atuk
add method container css in your script like this :
在脚本中添加方法容器 css，如下所示：
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
it will set your select's width same as width your div.
它会将您选择的宽度设置为与您的 div 的宽度相同。
回答by helene
Setting width to 'resolve' didn't work for me. Instead, i added "width:100%" to my select, and modified the css like this :
将宽度设置为“解决”对我不起作用。相反，我在我的选择中添加了“width:100%”，并像这样修改了 css：
.select2-offscreen {position: fixed !important;}
.select2-offscreen {position: fixed !important;}
This was the only solution that worked for me (my version is 2.2.1) Your select will take all the available place, it is better than using
这是唯一对我有用的解决方案（我的版本是 2.2.1）您的选择将占据所有可用的位置，这比使用更好
class="input-medium"
class="input-medium"
from bootstrap, because the select is always staying in the container, even after resizing the window (responsive)
来自引导程序，因为即使在调整窗口大小之后，选择也始终留在容器中（响应式）
回答by Ravindu Lokumanna
Add width resolve option to your select2 function
向 select2 函数添加宽度解析选项
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
After add below CSS to your stylesheet
将以下 CSS 添加到样式表后
.select2-container {
width: 100% !important;
}
It will sort the issue
它将对问题进行排序
回答by Abdelsalam Shahlol
On a recent project built using Bootstrap 4, I had tried all of the above methods but nothing worked. My approach was by editing the libraryCSSusing jQueryto get 100%on the table.
在最近使用Bootstrap 4构建的项目中，我尝试了上述所有方法，但没有任何效果。我的方法是使用jQuery编辑库CSS以获得100%的表格。
// * Select2 4.0.7
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%', //Doesn't work
width: 'resolve'
});
//The Fix
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
Working Demo
工作演示
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%',//Doens't work
width: 'resolve'
});
//Fix the above style width:100%
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="w-50">#</th>
<th scope="col" class="w-50">Trade Zones</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
multiple="multiple">
<option value="1">One</option>
<option value="1">Two</option>
<option value="1">Three</option>
<option value="1">Okay</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>回答by Bablu Ahmed
You can try like this. It works for me
你可以这样试试。这个对我有用
$("#MISSION_ID").select2();
$("#MISSION_ID").select2();
On hide/show or ajax request, we have to reinitialize the select2 plugin
在隐藏/显示或 ajax 请求时，我们必须重新初始化 select2 插件
For example:
例如：
$("#offialNumberArea").show();
$("#eventNameArea").hide();
$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});
