jquery - 如果选择长文本选项，则选择元素 100% 宽度错误(Select2 bootstrap 主题)

Question

如果选择了长文本选项并且元素宽度为 100%，我将 select2 与 bootstrap 3 主题一起使用，并且 select2 元素溢出容器。

这只发生在 Mozilla Firefox 中!!

我创建了一个example

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

这是影响元素溢出的代码

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

Answer 1

设置内联样式:

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

注释.select2-container额外的css:

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

在 select2 init 上添加“元素”宽度:

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

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

如果您使用 Bootstrap ，请尝试 this相反，解决方案改编自 github 上的帖子:

.form-group .select2-container {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}

如果您使用输入组而不是表单组，请将第一行更改为:

.input-group .select2-container {