5

我使用 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 引导程序，是否有一些依赖？

4

4 回答 4

4

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

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

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

containerCssClass: 'mySpecialClass'

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

.mySpecialClass {
    width: 100%;
}

其中任何一个都可以！

于 2014-07-16T22:06:53.103 回答
0

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

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

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

于 2013-06-05T15:26:28.027 回答
0

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

$("#tags").select2({ width: '100%' });
于 2014-06-29T08:38:52.207 回答
-1

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

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

试试这对我来说是正确的

.menu ul {
    width: 97%;
}
于 2017-01-25T19:58:09.723 回答