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

Question

我使用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，是否有某些依赖关系？

- tester

---

你能创建一个 Fiddle 吗？ - Adil Shaikh

你尝试设置宽度了吗？ - David Chase

抱歉，我无法创建一个重现这个问题的fiddle。我已经尝试了在上述JS的select2()函数内使用minimumWidth: 200。 - tester

Answer 1

这是一个简单的修复方法。只需更改您的代码为以下内容：

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

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

containerCssClass: 'mySpecialClass'

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

.mySpecialClass {
    width: 100%;
}

任何一个都可以使用！

- AJ Quick

Answer 2

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

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

- Edwin Lunando

Answer 3

我也遇到了同样的问题，但只是在使用Bootstrap时。我发现这个方法可行。以下是我在Select2中找到的类。

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

将宽度设置为您需要的任何值。

- Kevin Kirtley

---

仅使用Bootstrap的响应式网格无法设置固定宽度，因此我们需要另一种解决方案。 - netAction

Answer 4

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

以下代码可以将 input 文本字段缩小到选择框内，以适应选择框，并在删除标签后不会缩小。

尝试这个，它对我有效。

.menu ul {
    width: 97%;
}

- Shwan Namiq