如果选择隐藏，Select2 无法正确计算“已解析”宽度

Question

我正在使用 Twitter 引导程序和出色的 Select2 插件。

这些工作得很好，我意识到你需要在启动 Select2 时设置{width: 'resolve'}否则它看起来一团糟！。

但是我的一个选择有问题，如下图所示， Referee Type选择的宽度不正确。

这是由于该字段最初是隐藏的，并且只有在“组”字段中选择了“裁判”时才可见。

那么，我该如何解决这个问题？

Answer 1

Select 2足够聪明，可以重新计算它的大小，只要你在select标签中设置它。 像这样：

<select style="width: 100%"></select>

类上的 CSS 格式不起作用！

在“响应式设计 - 百分比宽度”中阅读更多内容

Answer 2

您可以在<select>元素中设置宽度，如下所示：

<select style="width:260px">

直到找到所需的宽度。 其实官方select2插件站点上的例子都是这样做的。

但是，如果您打算远离内联样式，您总是可以简单地覆盖 select2 的 CSS 并定位生成的容器。

.select2-container {
  width: 260px;
}

Answer 3

我用简单的 CSS 解决了类似的问题：

.select2-container {
    width: 100% !important;
}

Answer 4

不是在页面加载时在裁判类型上调用select2() ，而是在第一次显示裁判类型后调用select2 。 这样，选择将是可见的（具有适当的宽度），并且'width': 'resolve'选项应该可以工作。 如果您提供一个小的 jsfiddle 示例，则更容易指出这一点。

Answer 5

设置宽度为100%的select元素的style属性

<select class="js-example-responsive" style="width: 100%"></select>

请参阅响应式设计 - 百分比宽度

Answer 6

.select2-container {
  width: 100% !important;
}

Answer 7

当您取消隐藏带有 Select2 的控件时执行此操作：

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();

Answer 8

我的首选解决方案是停止select2分配这些width并让它们自动进行。 在select2.full.js注释以下select2.full.js ：

对于容器：

  Select2.prototype._placeContainer = function ($container) {
    $container.insertAfter(this.$element);

      //##!!
      /*
    var width = this._resolveWidth(this.$element, this.options.get('width'));

    if (width != null) {
      $container.css('width', width);
    }*/
  };

对于在容器内搜索：

  Search.prototype.resizeSearch = function () {

    //##!!
    /*
    this.$search.css('width', '25px');

    var width = '';

    if (this.$search.attr('placeholder') !== '') {
      width = this.$selection.find('.select2-selection__rendered').innerWidth();
    } else {
      var minimumWidth = this.$search.val().length + 1;

      width = (minimumWidth * 0.75) + 'em';
    }

    this.$search.css('width', width);
    */
  };

  return Search;
});

Answer 9

您可以将单击事件绑定到打开隐藏元素的元素并在那里设置 select2 宽度。 为我工作，这很简单。 我使用了 click 事件，因为只用“文档准备好”来做它是行不通的。

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }

Answer 10

根据文档，您可以在初始化设置中添加适当的宽度：

$(".js-example-responsive").select2({
    width: '100%' // or 'resolve' or 'style' or 'element' - see docs
});

对我来说就像一个魅力，而其他食谱没有帮助。

Answer 11

让它工作的黑客是运行：

$('.filter-modal select').css('width', '100%'); 在$('select').select2().

https://github.com/select2/select2/issues/4269

Answer 12

这对我有用

.select2-container  {
    width: 100% !important;
}

也是固定宽度

.select2-container  {
    width: 300px !important;
}

Answer 13

Select2 有一个奇怪的错误，它没有以正确的方式“解决”隐藏的 Select2 元素。 这不是工作位置width: "resolve"因为这已经是默认值。 相反，解决方法是显示 select2 并在声明后一秒钟突然隐藏它们。

$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness

这将正确呈现 select2。

Answer 14

$("span.select2").css("width", "100%");