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

Question

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

http://plnkr.co/edit/NkdWUO?p=preview

在本地设置中,我得到了select2工作,但是我无法按照文档中的描述设置宽度.它太窄而无法使用.

谢谢.

编辑:没关系plnkr,我在这里发现了一个工作小提琴 http://jsfiddle.net/pEFy6/

看起来这是select2的行为折叠到第一个元素的宽度.我可以通过bootstrap设置宽度.class="input-medium"但是不确定为什么angular-ui不接受配置参数.

Answer 1

在我的情况下,如果有零个或多个药片,select2将正确打开.

但如果有一个或多个药丸,并且我将它们全部删除,它将缩小到最小宽度.我的解决方案很简单:

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

Answer 2

您需要指定要解析的属性宽度以保留元素宽度

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

Answer 3

这是一个老问题,但新信息仍值得张贴......

从Select2版本3.4.0开始,有一个属性dropdownAutoWidth可以解决问题并处理所有奇怪的情况.请注意,默认情况下不启用.它会在用户进行选择时动态调整大小,allowClear如果使用该属性则会增加宽度,并且它也会正确处理占位符文本.

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

Answer 4

select2 V4.0.3

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

Answer 5

使用> 4.0的select2

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

这些其他的不起作用:

• dropdownCssClass:'bigdrop'
• 宽度:'100%'
• 宽度:'解析'

Answer 6

在你的脚本中添加方法容器css,如下所示:

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

它会将您的选择宽度设置为与您的div宽度相同.

Answer 7

向 select2 函数添加宽度解析选项

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

将以下 CSS 添加到样式表后

.select2-container {
width: 100% !important;
}

它将对问题进行排序