web-dev-qa-db-ja.com

長いテキストのオプションが選択されている場合、要素の100％幅のバグを選択します（Select2 bootstrap theme）

Select2をbootstrap 3テーマで使用しており、長いテキストのオプションが選択され、要素の幅が100％の場合、select2要素のオーバーフローコンテナを使用しています。

これはMozillaFirefoxでのみ発生します!!

例 を作成します

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

これは要素のオーバーフローに影響を与えるコードです

span.select2-selection__rendered {
  white-space: nowrap;
}
jquerytwitter-bootstrap-3jquery-select2
7
user3714967

インラインスタイルを設定します。

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

コメント.select2-containerextra css：

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

Select2initに「element」幅を追加します。

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

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

bootstrap try this solutionを使用している場合は、代わりに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 {
20
chemark

これは、select2をbootstrap 4：

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

bootstrapを使用している場合は、機能します。

.form-group > .select2-container {
    width: 100% !important;
}
0
Satish Rabari