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

Select2 not calculating `resolved` width correctly if select is hidden

提问by Hailwood

I am using Twitter bootstrap and the fantastic Select2 plugin.

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

These are working great, I realized you need to set {width: 'resolve'}when initiating Select2 otherwise it looks messed up!.

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

But I am having an issue with one of my selects, as you can see in the image below, the Referee Typeselect has an incorrect width.

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

This is caused due to this field being initially hidden, and only becoming visible if Refereeis selected in the Groupfield.

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

So, how can I fix this?

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

回答by Yevgeniy Afanasyev

Select 2is smart enough to recalculate it's size if only you set it in the selecttag. Like so:

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

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

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

CSS formatting on classes would not work!

类上的 CSS 格式不起作用！

Read more in "Responsive design - Percent width"

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

回答by brianrhea

You can set the width in the <select>element like so:

您可以<select>像这样设置元素的宽度：

<select style="width:260px">

Until you find the desired width that you're looking for. In fact, the examples on the official select2 plugin site are done in this way.

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

However, if you're intent upon staying away from inline styles, you can always simply override select2's CSS and target the resulting container.

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

.select2-container {
  width: 260px;
}

回答by NMC

I solved my similar problem with simple CSS:

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

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

回答by dyve

Instead of invoking select2()on the Referee Type when the page loads, invoke select2after showing Referee Type for the first time. This way, the select will be visible (with a proper width), and the 'width': 'resolve'option should work. If you provide a small jsfiddle example it would be easier to point this out.

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

回答by JwJosefy

Set the style property of selectelement with width 100%

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

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

See Responsive design - Percent width

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

回答by BertrandJ

Execute this when you unhide controls with Select2 attached:

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

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

回答by Omid Ahmadyani

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

回答by tika

My preferred solution is to stop select2from assigning those widthand let them be automatic. Comment the following in select2.full.js:

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

For Container:

对于容器：

  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);
    }*/
  };

For Search inside the container:

对于在容器内搜索：

  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;
});

回答by Harry Bosh

hack to make it work is to run:

让它工作的黑客是运行：

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

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

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

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

回答by Jam

This worked for me

这对我有用

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

also a fixed width

也是固定宽度

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