如果选择了带有长文本的选项,则选择元素100%宽度错误(Select2 bootstrap主题)

Question

我正在使用带有bootstrap 3主题的select2和select2元素溢出容器,如果选择了带有长文本的选项并且元素的宽度是100%.

这只发生在Mozilla Firefox !!

我创建了一个例子

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

这是影响元素溢出的代码

span.select2-selection__rendered {
  white-space: nowrap;
}

Answer 1

设置内联样式:

<select class="select2" style="width:100%">

评论.select2-container extra css:

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

在select2 init上添加'element'宽度:

$('.select2').select2({
     width: 'element',
    minimumResultsForSearch: Infinity
  });
});

示例:http://jsfiddle.net/chemark/z9sLqLbx/

如果您使用的是bootstrap,请尝试使用此解决方案:http: //xcellerant.net/2015/09/17/fixing-the-width-of-a-select-2-with-a-long-value-in-a-自举型基团的或输入的基团/

Answer 2

这对我有用，将 select2 与 bootstrap 4 一起使用：

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