设置select2input的宽度(通过Angular-ui指令)

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

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

在这里输入图像说明

谢谢。

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

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

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

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

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

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

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

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

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

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

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

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

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

select2 V4.0.3

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

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

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

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

class="input-medium"

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

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

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

用> 4.0的select2我正在使用

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

这些其他人没有工作:

  • dropdownCssClass:'bigdrop'
  • 宽度:“100%”
  • 宽度:“解决”