47

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

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

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

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

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

输入

4

14 回答 14

32

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

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

类上的 CSS 格式不起作用！

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

于 2016-01-14T01:41:41.267 回答
19

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

<select style="width:260px">

直到找到所需的宽度。其实select2插件官方网站上的例子就是这样完成的。

但是，如果您打算远离内联样式，则始终可以简单地覆盖 select2 的 CSS 并以生成的容器为目标。

.select2-container {
  width: 260px;
}
于 2013-04-19T05:20:43.570 回答
16

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

.select2-container {
    width: 100% !important;
}
于 2016-08-02T09:53:41.440 回答
8

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

于 2013-07-19T09:22:51.673 回答
6

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

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

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

于 2015-01-29T03:14:33.173 回答
3 
.select2-container {
  width: 100% !important;
}
于 2018-12-17T06:31:38.533 回答
2

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

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();
于 2014-01-10T09:50:46.190 回答
2

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

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }
于 2018-05-17T12:44:51.763 回答
0

我首选的解决方案是停止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;
});
于 2015-12-11T05:42:58.850 回答
0

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

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

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

于 2022-01-21T07:14:47.487 回答
-1

这对我有用

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

也是固定宽度

.select2-container  {
    width: 300px !important;
}
于 2018-04-13T15:36:27.127 回答
-1

让它工作的黑客是运行：

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

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

于 2017-08-21T02:57:35.160 回答
-1

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。

于 2018-05-18T08:27:30.800 回答
-2 
$("span.select2").css("width", "100%");
于 2016-06-09T13:06:54.220 回答