select2 下拉自动宽度无法正常工作答案

【问题标题】：select2 dropdown auto width not working properlyselect2 下拉自动宽度无法正常工作
【发布时间】：2014-01-23 22:32:39
【问题描述】：

我正在使用 select2 在我的 SharePoint 搜索页面上将 dropdownautowidth 设置为 true，并且它首次在页面加载时完美运行。在我搜索一些关键字后，页面会加载搜索结果，然后 dropdownautowidth 没有以某种方式设置为 true。我在 document.ready 函数上使用了 $('#ddlCategory').select2({dropdownAutoWidth : true}); 语句。

感谢任何帮助。

【问题讨论】：

标签： jquery-select2

【解决方案1】：

这对我有用：

$('select').select2({
    dropdownAutoWidth : true,
    width: 'auto'
})

【讨论】：

我也需要“宽度：'auto'”。谢谢！
添加“宽度：'auto'”修复了我在 Firefox 和 IE 中注意到的错误。谢谢！
在我的模板中有一个可以扩展的侧栏，因此宽度：'100%' 对我有用。
这绝对是答案！

【解决方案2】：

你需要引用它，比如：

$('#ddlCategory').select2({dropdownAutoWidth: 'true'});

这对我有用。

【讨论】：

【解决方案3】：

在 select2 4.0.0 中，这对我也不起作用。我使用这种解决方法：

$('select').select2();

CSS：

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

【讨论】：

【解决方案4】：

我只是将参数width: 'auto'放在函数调用上，然后它就可以正常工作了。

$('#months').select2({
    width: 'auto',
    allowClear: false,
    height: '100%',
});

【讨论】：

【解决方案5】：

我在这里尝试了所有解决方案，但有效的是：

width: '100%'

或

width: 'style'

并向选择元素添加样式属性，至少包含width:100%。

【讨论】：

【解决方案6】：

将 .select2-container 类的 CSS 从 display: inline-block; 调整为 display: block; 对我有用。

【讨论】：

【解决方案7】：

这些添加这些行：

.select2-icon-result {
    display: flex;
    flex-flow: row nowrap;
}

到我的主css文件解决了“如何在autocomplete.ModelSelect2中应用空白：nowrap”的问题：

【讨论】：