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

Posted 2023-05-07

【中文标题】select2 下拉自动宽度无法正常工作

【英文标题】：select2 dropdown auto width not working properly

【发布时间】：2014-01-23 22:32:39

【问题描述】：

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

感谢任何帮助。

【参考方案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”的问题：