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

Question

我正在使用Twitter bootstrap和梦幻般的Select2插件.

这些工作很棒,我意识到你需要{width: 'resolve'}在启动Select2时设置,否则它看起来搞砸了!

但是我的一个选择存在问题,如下图所示,Referee Type选择的宽度不正确.

这是由于此字段最初是隐藏的,只有在" 组"字段中选择" 裁判"时才会显示.

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

Answer 1

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

<select style="width:260px">

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

但是,如果您打算远离内联样式,则可以始终简单地覆盖select2的CSS并定位生成的容器.

.select2-container {
  width: 260px;
}

Answer 2

如果只在select标签中设置,则Select 2足够智能,可以重新计算它的大小.像这样

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

类上的CSS格式不起作用!

阅读更多" 响应式设计 - 百分比宽度 "

Answer 3

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

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

Answer 4

select2()页面加载时不是在Referee Type 上调用,而是select2在第一次显示Referee Type后调用.这样,选择将是可见的(具有适当的宽度),并且该'width': 'resolve'选项应该起作用.如果你提供一个小的jsfiddle例子,那么更容易指出这一点.

Answer 5

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

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

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