如何修复 select2 的占位符在文档准备好时被截断？

Posted 2023-05-07

【中文标题】如何修复 select2 的占位符在文档准备好时被截断？

【英文标题】：How to fix select2's placeholder truncated at document ready?

【发布时间】：2020-08-12 03:57:46

【问题描述】：

我已经使用 jQuery（.select2() 函数）在文档中创建了一个多重选择。选择运行良好，已正确创建，但占位符仅显示几个字符。 当我输入一些数据，然后使用清除按钮重置时，占位符会正确显示。 我怎样才能解决这个问题？

[这是我在准备好文档时使用截断占位符的选择]

[在这里您可以找到带有正确占位符的选择]

这是jquery代码：

$('#myselect').select2(
    multiple: true,
    allowClear: true,
    placeholder: Translator.trans('label.pleaseSelect')
);

这是我的 html

<select class="form-control" name="myName" id="myselect" style="width: 100% !important;" multiple>
<option></option>
% for field in data.fields %
<option value=" field['id'] " > field['description'] </option>
% endfor %
</select>

感谢您的帮助！

【问题讨论】：

看起来输入的宽度不足以容纳整个 placeholder 文本。您是否尝试过在 CSS 中默认使其更宽？

我忘记发布 html 代码（我现在将其添加到主帖中），但是是的，我在 HTML 中添加了宽度为 100% 的样式。这就是你的意思吗？是这样吗？

不完全是，这是隐藏的选择的 100% 宽度。您需要将其放在 Select2 动态创建的元素上

考虑到您告诉我的内容，我做了很多尝试。最后我找到了一个适合我的解决方案： .select2-search__field width: 100% !important;

【参考方案1】：

考虑到 Rory McCrossan 告诉我的内容，我做了很多尝试。最后我找到了一个适合我的解决方案：

.select2-search__field 
    width: 100% !important;

非常感谢！

【参考方案2】：

这个替代的纯 CSS 解决方案对我有用：

https://***.com/a/59953451/3087844

我的实例部署在 WordPress 下，使用 Select2 v 4.0.13 和 jQuery v 1.12.4。