如果选择被隐藏，则Select2不能正确计算“已解决”宽度

Question

我正在使用Twitter bootstrap和the fantastic Select2 plugin。

这些都很有效，我意识到你需要在启动Select2时设置{width: 'resolve'}，否则它看起来搞砸了！。

但我的选择之一存在问题，如下图所示，Referee Type选择的宽度不正确。

这是由于此字段最初是隐藏的，只有在组字段中选择 Referee 时才会显示。

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

Answer 1

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

<select style="width:260px">

直到找到所需的宽度。事实上，官方select2插件网站上的示例都是以这种方式完成的。

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

.select2-container {
  width: 260px;
}

Answer 2

选择2非常智能，只要您在select标签中设置它，就可以重新计算它的大小。像这样

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

类上的CSS格式不起作用！

在＆＃34; Responsive design - Percent width＆＃34;

中阅读更多内容

Answer 3

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

Answer 4

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

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

Answer 5

设置select元素的样式属性，宽度为100％

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

请参阅Responsive design - Percent width

Answer 6

当您使用Select2附加取消隐藏控件时执行此操作：

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

Answer 7

我首选的解决方案是阻止select2分配width并让它们自动化。在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 8

破解使其工作就是运行：

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

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

Answer 9

这对我有用

$('div[data-toggle="collapse"]').parent().click(function(){
    $('div[data-toggle="collapse"]').each(function(){
        //Reset values for all
        $(this).next().removeClass('in');
      })
      //No need to add anything, your site does this for you
});

也是固定宽度

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

Answer 10

您可以将click事件绑定到打开隐藏元素的元素，并在那里设置select2宽度。为我工作，这很简单。我使用了click事件，因为只使用'document ready'来执行它不起作用。

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

Answer 11

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 12

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

Answer 13

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