Select2 宽度问题，控件覆盖父宽度

Question

我在 bootstrap 网格中使用 Select2 控件，但是当我 select 下拉列表中的一个值更大（这里我指的是宽度）时，它会展开并覆盖由 "col-md" class 或 bootstrap

指定的宽度

though there are many workarounds mentioned on a similar issue https://github.com/t0m/select2-bootstrap-css/issues/42

但其中 none 对我有用

请指导。我怎样才能将宽度限制为其容器元素的宽度

Answer 1

在那种情况下使用固定宽度并使用 overflow:auto 然后你可以限制 div 或任何标签的 with

Answer 2

我找到了解决问题的方法，

在输入组上，我将 Display 从 table 更改为 Block ，并且有效:)

Answer 3

我也尝试了各种建议的解决方法，但都没有效果。此外，我需要 select2 控件在调整 window 大小时正确调整大小，因此我定义了一个 reset_select2_size 函数，每次调整大小时都会调用该函数。尽管此处未显示，但只要 UI 组件中的任何更改需要重置该组件内的 select2 大小，也应调用此函数（例如，当包含 select2 的隐藏 div 变为可见时）。

从任何标准来看这都不是很漂亮，但在错误被修复之前对我来说似乎工作正常，

function reset_select2_size(obj)
{
    if (typeof(obj)!='undefined') {
        obj.find('.select2-container').parent().each(function() {
            $(this).find('.select2-container').css({"width":"10px"});
        });

        obj.find('.select2-container').parent().each(function() {
            var width = ($(this).width()-5)+"px";
            $(this).find('.select2-container').css({"width":width});
        });
        return;
    }

    $('.select2-container').filter(':visible').parent().each(function() {
        $(this).find('.select2-container').css({"width":"10px"});
    });
    $('.select2-container').filter(':visible').parent().each(function() {
        var width = ($(this).width()-5)+"px";
        $(this).find('.select2-container').css({"width":width});
    });
}

function onWindowResized( event )
{
    reset_select2_size();
}

window.addEventListener('resize', onWindowResized );

Select2 宽度问题，控件覆盖父宽度

Select2 width Issue, The control overrides that parent width

html

css

twitter-bootstrap

ui-select2