在 Select2 中删除标签时，Selectbox 的宽度会缩小答案

【问题标题】：Selectbox's width shrinks on tag deletion in Select2在 Select2 中删除标签时，Selectbox 的宽度会缩小
【发布时间】：2013-04-22 12:05:31
【问题描述】：

我使用 Select2 来制作一个标签框。我添加了以下html代码：

<select id="tags" multiple="">
    <option value="tag_1">Tag1</option>
    <option value="tag_2">Tag2</option>
    <option value="tag_3">Tag3</option>
</select>

我使用了这个 JS：

$(document).ready(function() {
    $("#tags").select2({
        placeholder: "Select tag",
        allowClear: true,
        minimumInputLength: 2,
        maximumSelectionSize: 1,
    });
});

问题是：文本框在首次加载时具有正常宽度。插入标签后，它将正确显示。但是，如果我单击退格键或单击标记的 x 将其删除，则文本框的宽度会缩小到 5px 左右。我究竟做错了什么？我也用twitter bootstrap，有没有依赖？

【问题讨论】：

你能创造一个小提琴..
你试过设置宽度吗？？
sry，我无法创建重现此问题的小提琴。我已经在上面发布的JS的select2()函数中尝试了minimumWidth: 200。

标签： jquery select width jquery-select2

【解决方案1】：

这是一个简单的修复。只需将您的代码更改为：

$(document).ready(function() {
    $("#tags").select2({
        placeholder: "Select tag",
        allowClear: true,
        minimumInputLength: 2,
        maximumSelectionSize: 1,
        width: '100%',
    });
});

您还可以通过添加以下属性来设置自定义 CSS：

containerCssClass: 'mySpecialClass'

然后分配一些自定义 CSS 来处理宽度。

.mySpecialClass {
    width: 100%;
}

其中任何一个都可以！

【讨论】：

【解决方案2】：

有同样的问题，但只有 Bootstrap。我发现这行得通。这些是我发现由 Select2 生成的类。

#s2id_groupSelect, .select2-input, .select2-container, .select2-search-field, .select2-choices {
width: 358px;
}

根据需要设置宽度。

【讨论】：

只是 Bootstrap 的响应式网格不允许设置固定宽度。所以我们需要另一种解决方案。

【解决方案3】：

尝试在 select2 初始化代码中添加width 选项。

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

【讨论】：

【解决方案4】：

我有同样的问题，我从谷歌搜索了更多我没有找到正确的解决方案，经过今天的一些尝试，我解决了我的问题。 WordPress 管理文件夹中load-styles.php 中的.menu ul 菜单中的问题

下面的代码减少了选择框中的input文本字段以适应选择框，并且在删除标签后不缩小。

试试这对我来说是否正确

.menu ul {
    width: 97%;
}

【讨论】：