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

将宽度设置为您需要的宽度。

Answer 3

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

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

Answer 4

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

以下代码会缩小选择框中的load-styles.php文本字段以适合选择框，并且在删除标记后不会缩小。

尝试这是正确的用法

input

Selectbox中的标签删除时，Selectbox的宽度会缩小

4 个答案: