设置select2input的宽度（通过Angular-ui指令）

我有问题使这个plunkr（select2 + angulat-ui）工作。

在本地设置中，我得到了select2的工作，但是我不能像文档中所描述的那样设置宽度。 它太窄而无法使用。

谢谢。

编辑：不要介意这个plnkr，我在这里find了一个工作小提琴http://jsfiddle.net/pEFy6/

它看起来像select2的行为倒塌到第一个元素的宽度。 我可以通过bootstrap class="input-medium"来设置宽度。不知道为什么angular-ui不需要configuration参数。

Answer 1

您需要指定要parsing的属性宽度，以便保留元素宽度

 $(document).ready(function() { $("#myselect").select2({ width: 'resolve' }); }); 

Answer 2

在我的情况下，select2会正确打开，如果有零或更多的药片。

但如果有一个或多个药丸，我把它们全部删除，它会缩小到最小的宽度。 我的解决办法很简单：

 $("#myselect").select2({ width: '100%' }); 

Answer 3

这是一个古老的问题，但新的信息仍然值得发布…

从Select2版本3.4.0开始，有一个属性dropdownAutoWidth可以解决问题并处理所有的奇怪情况。 请注意，它默认情况下不是。 它会根据用户的selectdynamicresize，如果使用该属性，则会为allowClear添加宽度，并且也会正确处理占位符文本。

 $("#some_select_id").select2({ dropdownAutoWidth : true }); 

Answer 4

在你的脚本中添加方法容器的CSS像这样：

 $("#your_select_id").select2({ containerCss : {"display":"block"} }); 

它会设置你的select的宽度相同的宽度你的div。

Answer 5

select2 V4.0.3

 <select class="smartsearch" name="search" id="search" style="width:100%;"></select> 

Answer 6

设置宽度为“解决”不适合我。 相反，我添加了“宽度：100％”我的select，并修改了这样的CSS：

.select2-offscreen {position: fixed !important;}

这是唯一的解决scheme，为我工作（我的版本是2.2.1）您的select将采取所有可用的地方，它比使用

class="input-medium"

从引导，因为select始终停留在容器中，即使调整窗口的大小（响应）

Answer 7

Select2Gem使用和下拉列表显示，但你可以设置你自己的味精这些下拉菜单。

 <script type="text/javascript"> $('.message_template').select2({language: {noResults: function (params) {return "対象データが存在しません。";}}}); </script> 

Answer 8

用> 4.0的select2我正在使用

 $("select").select2({ dropdownAutoWidth: true }); 

这些其他人没有工作：

• dropdownCssClass：'bigdrop'
• 宽度：“100％”
• 宽度：“解决”