javascript - Select2 多父级不改变换行高度

Question

编辑:它是由一个晦涩难懂的 height: 34px !important; 引起的由某人制作了很长时间 - 永远不要相信旧代码。评论并完美地工作。感谢 Calvin Nunes 建议包含一个片段，感谢 Tayyab Khan 提出让我考虑的高度问题。在尝试重现该行为时，我想到了 ctrl+f-ing 旧的 css 文件。不过，我无法在代码检查中找到它...对于给您带来的不便，我们深表歉意。

在我工作的地方，我们使用 ASP.NET MVC 5、Bootstrap (v3.3.7)、jQuery (v2.2.3) 并使用 Select2 插件 (v4.0.5)。问题是，当我使用 <select multiple><!--options--></select>并选择足以使其断开链接的选项，高度确实会增加，但父级不会跟随，使其与下一行重叠。知道是什么原因造成的和/或如何解决它吗？这是发生了什么:

断线前:

断线后:

我查看了 select2 示例，看不出在实现上有什么不同，但它工作得很好......我打开了两者的代码检查以查找任何相关的差异，但没有找到。也许我遗漏了什么。

标记是这样的:

<div class="row">
    <div class="col-md-12">
        <select id="contatos" class="form-control" multiple></select>
    </div>
</div>

脚本是这样的:

$('#contatos').select2({
    tags: true,
    tokenSeparators: [',', ' ', ';'],
    dataMiminumInputLength: 2,
    ajax: {
        url: '/Gerenciamento/Usuario/PesquisarUsuarios/',
        data: function (params) {
            return {
                termo: params.term
            };
        },
        processResults: function (data) {
            var results = [];
            $(data).each(function (i, el) {
                results.push({
                    id: el.desEmail,
                    text: el.desNome + ' | ' + el.desEmail,
                    codUsuario: el.codUsuario,
                    desEmail: el.desEmail
                });
            });
            return { results: results }
        },
        delay: 400
    }
});

注意:此应用程序中所有使用 select multiple 都会发生这种情况。

Answer 1

这是 css 问题，您是否在页面中添加了 select2-bootstrap.css？检查它，因为它为 Bootstrap 提供了 select2 css，你可以在第 10 行检查高度。它应该是自动的

.form-control.select2-container {
    height: auto !important;
    padding: 0;
}