Selectbox中的标签删除时,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,有一些依赖吗？

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%;
}

其中任何一个都会起作用！

Answer 2

遇到同样的问题，但仅限于 Bootstrap。我发现这很有效。这些是我发现由 Select2 生成的类。

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

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