blocks|key|249808|text|您需要指定要解析的属性宽度，以便保留元素宽度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249809|$(document).ready(function()+{+
++++$("#myselect").select2({+width:+'resolve'+});+++++++++++
});|code-block|syntax|javascript|249810|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You need to specify the attribute width to resolve in order to preserve element width

<pre><code>$(document).ready(function() { 
 $("#myselect").select2({ width: 'resolve' }); 
});
</code></pre>

blocks|key|466438|text|在我的例子中，如果有零个或更多的药丸，select2将正确打开。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466439|但如果有一个或多个药片，我把它们都删除了，它就会缩小到最小的宽度。我的解决方案很简单：|466440|$("#myselect").select2({+width:+'100%25'+});++++++|code-block|syntax|javascript|466441|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In my case the select2 would open correctly if there was zero or more pills.

But if there was one or more pills, and I deleted them all, it would shrink to the smallest width. My solution was simply:

<pre><code>$("#myselect").select2({ width: '100%' }); 
</code></pre>

blocks|key|249942|text|这是一个老问题，但新的信息仍然值得张贴。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249943|从Select2版本3.4.0开始，有一个属性dropdownAutoWidth，它可以解决这个问题并处理所有奇怪的情况。请注意，默认情况下该选项不处于打开状态。当用户做出选择时，它会动态调整大小，如果使用了allowClear属性，它会增加宽度，还会正确处理占位符文本。|offset|length|style|CODE|249944|$("#some_select_id").select2({
++++dropdownAutoWidth+:+true
});|code-block|syntax|javascript|249945|entityMap^0|0|N|H|2W|A|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

This is an old question but new info is still worth posting...

Starting with Select2 version 3.4.0 there is an attribute <code>dropdownAutoWidth</code> which 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 <code>allowClear</code> if that attribute is used, and it handles placeholder text properly too.

<pre class="lang-js prettyprint-override"><code>$("#some_select_id").select2({
 dropdownAutoWidth : true
});
</code></pre>

blocks|key|249959|text|select2+V4.0.3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249960|<select+class="smartsearch"+name="search"+id="search"+style="width:100%25;"></select>|code-block|syntax|javascript|249961|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

select2 V4.0.3

<pre><code>&lt;select class="smartsearch" name="search" id="search" style="width:100%;"&gt;&lt;/select&gt;
</code></pre>

blocks|key|466476|text|在脚本中添加方法容器css，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466477|$("#your_select_id").select2({
++++++containerCss+:+{"display":"block"}
});|code-block|syntax|javascript|466478|它会把你选择的宽度设置成和你的div的宽度一样。|466479|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

add method container css in your script like this :

<pre><code>$("#your_select_id").select2({
 containerCss : {"display":"block"}
});
</code></pre>

it will set your select's width same as width your div.

blocks|key|250042|text|将宽度解析选项添加到select2函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250043|$(document).ready(function()+{+
++++++++$("#myselect").select2({+width:+'resolve'+});+++++++++++
});|code-block|syntax|javascript|250044|在将下面的CSS添加到样式表之后|250045|.select2-container+{
width:+100%25+!important;
}|250046|它会解决这个问题|250047|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Add width resolve option to your select2 function 

<pre><code>$(document).ready(function() { 
 $("#myselect").select2({ width: 'resolve' }); 
});
</code></pre>

After add below CSS to your stylesheet

<pre><code>.select2-container {
width: 100% !important;
}
</code></pre>

It will sort the issue

blocks|key|466400|text|将宽度设置为“resolve”对我不起作用。相反，我在select中添加了"width:100%25“，并修改了css，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466401|.select2-offscreen+{position:+fixed+!important;}|offset|length|style|CODE|466402|这是唯一对我有效的解决方案(我的版本是2.2.1)，你的选择将占据所有可用的位置，这比使用|466403|class="input-medium"|466404|来自bootstrap，因为select总是留在容器中，即使在调整窗口大小(响应式)之后也是如此。|466405|entityMap^0|0|0|1C|0|0|0|K|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

Setting width to 'resolve' didn't work for me. 
Instead, i added "width:100%" to my select, and modified the css like this :

<code>.select2-offscreen {position: fixed !important;}</code>

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 

<code>class="input-medium"</code>

from bootstrap, because the select is always staying in the container, even after resizing the window (responsive)

blocks|key|466648|text|我也想在这里添加我的解决方案。这与上面Ravindu的答案类似。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466649|我在select2中添加了width:+'resolve',作为属性：|offset|length|style|CODE|466650|++++$('#searchFilter').select2({
++++++++width:+'resolve',
++++});|code-block|syntax|javascript|466651|然后，我使用!important向select2-container添加了一个min-width属性|466652|.select2-container+{
++++min-width:+100%25+!important;
}|466653|在select元素上，style='100px+!important;'属性需要!important才能工作：|466654|<select+class="form-control"+style="width:+160px;"+id="searchFilter"+name="searchfilter[]">|466655|entityMap^0|0|D|H|0|0|6|A|H|H|13|9|0|0|B|P|14|A|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$]]

Wanted to add my solution here as well. This is similar to Ravindu's answer above.
I added <code>width: 'resolve',</code> as a property within the select2:
<pre><code> $('#searchFilter').select2({
 width: 'resolve',
 });
</code></pre>
Then I added a <code>min-width</code> property to <code>select2-container</code> with <code>!important</code>:
<pre><code>.select2-container {
 min-width: 100% !important;
}
</code></pre>
On the select element, the <code>style='100px !important;'</code> attribute needed <code>!important</code> to work:
<pre><code>&lt;select class=&quot;form-control&quot; style=&quot;width: 160px;&quot; id=&quot;searchFilter&quot; name=&quot;searchfilter[]&quot;&gt;
</code></pre>

blocks|key|466677|text|在样式表中添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466678|.select2+{
++width:+unset+!important;
}|code-block|syntax|javascript|466679|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add this in your stylesheet:
<pre class="lang-css prettyprint-override"><code>.select2 {
 width: unset !important;
}
</code></pre>

blocks|key|466566|text|你可以试着这样做。对我来说很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466567|$("#MISSION_ID").select2();|offset|length|style|CODE|466568|在隐藏/显示或ajax请求时，我们必须重新初始化select2插件|466569|例如：|466570|$("#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();
++++}
});|code-block|syntax|javascript|466571|entityMap^0|0|0|R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can try like this. It works for me

<code>$("#MISSION_ID").select2();</code>

On hide/show or ajax request, we have to reinitialize the select2 plugin

For example:

<pre><code>$("#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();
 }
});
</code></pre>

blocks|key|466601|text|独立于select2的更简单的CSS解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|466602|//HTML
<select+id=""+class="input-xlg">
</select>
<input+type="text"+id=""+name=""+value=""+class="input-lg"+/>

//CSS
.input-xxsm+{
++width:+40px!important;+//for+2+digits+
}

.input-xsm+{
++width:+60px!important;+//for+4+digits+
}

.input-sm+{
++width:+100px!important;+//for+short+options+++
}

.input-md+{
++width:+160px!important;+//for+medium+long+options+
}

.input-lg+{
++width:+220px!important;+//for+long+options++++
}

.input-xlg+{
++width:+300px!important;+//for+very+long+options+++
}

.input-xxlg+{
++width:+100%25!important;+//100%25+of+parent+++
}|code-block|syntax|javascript|466603|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Easier CSS solution independent from select2

<pre><code>//HTML
&lt;select id="" class="input-xlg"&gt;
&lt;/select&gt;
&lt;input type="text" id="" name="" value="" class="input-lg" /&gt;

//CSS
.input-xxsm {
 width: 40px!important; //for 2 digits 
}

.input-xsm {
 width: 60px!important; //for 4 digits 
}

.input-sm {
 width: 100px!important; //for short options 
}

.input-md {
 width: 160px!important; //for medium long options 
}

.input-lg {
 width: 220px!important; //for long options 
}

.input-xlg {
 width: 300px!important; //for very long options 
}

.input-xxlg {
 width: 100%!important; //100% of parent 
}
</code></pre>

blocks|key|250131|text|你可以使用的另一种方式是在你的Select标签上设置样式的宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|250132|<select+id="myselect"+style="width:+20%25;">
++++<option>...</option>
</select>|code-block|syntax|javascript|250133|然后，使用这个|250134|$(document).ready(function()+{+
++++$("#myselect").select2({+width:+'style'+});+//This+will+use+style+attr+of+the+select+element++
});|250135|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Other Way you can use is setting width in style on your Select tag.
<pre><code>&lt;select id=&quot;myselect&quot; style=&quot;width: 20%;&quot;&gt;
 &lt;option&gt;...&lt;/option&gt;
&lt;/select&gt;
</code></pre>
Then, use this
<pre><code>$(document).ready(function() { 
 $(&quot;#myselect&quot;).select2({ width: 'style' }); //This will use style attr of the select element 
});
</code></pre>

I have problem making this plunkr (select2 + angulat-ui) work.

<a href="http://plnkr.co/edit/NkdWUO?p=preview" rel="noreferrer">http://plnkr.co/edit/NkdWUO?p=preview</a>

In local setup, I get the select2 work, but I cannot set the width as described in the <a href="http://angular-ui.github.com/#directives-select2" rel="noreferrer">docs</a>. It is too narrow to be used.

<img src="https://i.stack.imgur.com/VXKNn.png" alt="enter image description here">

Thank you.

EDIT:
Never mind that plnkr, I found a working fiddle here
<a href="http://jsfiddle.net/pEFy6/" rel="noreferrer">http://jsfiddle.net/pEFy6/</a>

It looks like it is the behavior of select2 to collapse to the width of first element. I could set the width through bootstrap <code>class="input-medium"</code> .Still not sure why angular-ui doesn't take config parameters.

set the width of select2 input (through Angular-ui directive)

容器

我在使用这个插件(select2 + angulat-ui)时遇到了问题。在本地设置中，我得到了select2工作，但我不能像中描述的那样设置宽度。它太窄了，不能使用。​​谢谢。编辑:别管这个了，我在这里找到了一把可以拉的小提琴看起来这是select2的行为，折叠到第一个元素的宽度。我可以通过bootstrap class="input-medium" .Still来设置宽度，我不确定为什么ang

问设置角度输入的宽度(通过select2 -ui指令)
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置角度输入的宽度(通过select2 -ui指令)EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置角度输入的宽度(通过select2 -ui指令)
EN