web-dev-qa-db-ja.com

Select2が非表示の場合、「解決された」幅を正しく計算しない

私はTwitter bootstrapと 幻想的なSelect2プラグイン 。を使用しています。

これらはうまく機能しているので、{width: 'resolve'} Select2を開始するときは、混乱します。

しかし、下の画像でわかるように、選択したものの1つに問題があります。Referee Type selectの幅が正しくありません。

これは、このフィールドが最初は非表示であり、RefereeがGroupフィールド。

だから、どうすればこれを修正できますか？

Inputs

javascriptjquerycsstwitter-bootstrapjquery-select2
39
Hailwood

Select 2は、selectタグで設定するだけで、サイズを再計算できるほどスマートです。そのようです

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

クラスのCSSフォーマットは機能しません！

詳しくは、「 レスポンシブデザイン-パーセント幅 」をご覧ください。

17
Yevgeniy Afanasyev

<select>要素で幅を次のように設定できます。

<select style="width:260px">

探している幅が見つかるまで。実際、公式のselect2プラグインサイトの例はこの方法で行われます。

ただし、インラインスタイルを避けたい場合は、select2のCSSをいつでもオーバーライドして、結果のコンテナーをターゲットにすることができます。

.select2-container {
  width: 260px;
}
17
brianrhea

単純なCSSで同様の問題を解決しました。

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

ページの読み込み時に、レフリータイプでselect2()を呼び出す代わりに、select2審判タイプを初めて表示した後。これにより、選択が（適切な幅で）表示され、'width': 'resolve'オプションが機能するはずです。小さなjsfiddleの例を提供すると、これを簡単に指摘できます。

8
dyve

select要素のスタイルプロパティを幅100％で設定します

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

レスポンシブデザイン-パーセント幅 を参照

6
JwJosefy

Select2がアタッチされたコントロールを再表示するときにこれを実行します。

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();
2
BertrandJ
.select2-container {
  width: 100% !important;
}
0
Omid Ahmadyani

私が推奨する解決策は、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;
});
0
tika