javascript - select2が非表示の場合、「解決済み」の幅が正しく計算されない

Question

私はTwitterブートストラップと素晴らしいSelect2プラグインを使用しています。

{width: 'resolve'}これらはうまく機能しています。Select2を開始するときに設定する必要があることに気付きました。そうしないと、混乱しているように見えます。

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

これは、このフィールドが最初は非表示になっていて、[グループ]フィールドで[審判]が選択されている場合にのみ表示されるために発生します。

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

Answer 1

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

<select style="width:260px">

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

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

.select2-container {
  width: 260px;
}

Answer 2

シンプルなCSSで同様の問題を解決しました：

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

Answer 3

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

Answer 4

select幅 100%の要素のスタイル プロパティを設定する

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

レスポンシブ デザイン - パーセント幅を参照してください。

Answer 5

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

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();

Answer 6

私の好みの解決策は、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;
});

Answer 7

これは私のために働いた

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

固定幅も

.select2-container  {
    width: 300px !important;
}

Answer 8

$("span.select2").css("width", "100%");