jquery - select2ボックスの高さを変更するにはどうすればよいですか

Question

https://github.com/ivaynberg/select2の select2 ボックスが気に入っています。 format: オプションを使用して各要素をフォーマットしていますが、見栄えがします。

選択した要素が画像のために選択ボックスの高さよりも大きいことを除いて、すべて問題ありません。

幅を変更する方法は知っていますが、高さを変更して、要素が選択された後に全体が表示されるようにするにはどうすればよいですか (約 150px)

これが私の開始です：

<script>
    $("#selboxChild").select2({
        matcher: function(term, text) { 
            var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
            return t.toUpperCase().indexOf(term.toUpperCase()) >= 0; 
        },
        formatResult: formatChild,
        formatSelection: formatChild,
        escapeMarkup: function(m) {
            return m;
        }
    });
</script>

ここに私の選択ボックスがあります

<select id="selboxChild" style="width: 300px; height: 200px">
    <option value="">No child attached</option>
</select>

明確にするために：各オプションの高さを変更したくありません 。子を選択した後に高さを変更する選択ボックスを探しています。

したがって、ページが最初にロードされると、「子が選択されていません」と表示されます。ドロップダウンをクリックして子を選択すると、子の画像が表示されます。今、展開する選択ボックスが必要です! そうしないと、子供の絵が途切れてしまいます。

誰かわかりますか？

score 33 · Accepted Answer

簡単な css でこれを行うことができます。私が読んだことから、クラス「select2-choices」で要素の高さを設定したいと考えています。

.select2-choices {
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

これにより、高さが 150px に設定され、必要に応じてスクロールされます。画像が希望どおりに収まるまで高さを調整するだけです。

css を使用して、select2-results (選択コントロールのドロップダウン部分) の高さを設定することもできます。

ul.select2-results {
  max-height: 200px;
}

200px がデフォルトの高さなので、ドロップダウンの目的の高さに変更します。

score 7 · Accepted Answer

The selected answer is correct but you shouldn't have to edit the select2.css file. You can add the following to your own custom css file.

.select2-container .select2-choice {
    display: block!important;
    height: 36px!important;
    white-space: nowrap!important;
    line-height: 26px!important;
}

score 7 · Accepted Answer

select2 対応のドロップダウンの高さを指定する方法を探してここに来ました。私のために働いたもの：

.select2-container .select2-choice, .select2-result-label {
  font-size: 1.5em;
  height: 41px; 
  overflow: auto;
}

.select2-arrow, .select2-chosen {
  padding-top: 6px;
}

前：

ここに画像の説明を入力

後： CSSで定義された高さを持つselect-2対応のドロップダウンここに画像の説明を入力

score 5 · Accepted Answer

スタイルシートセレクターは時間の経過とともに変更されたようです。私は select2-4.0.2 を使用していますが、現在、ボックスの高さを設定するための正しいセレクターは次のとおりです。

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px
}

score 5 · Accepted Answer

これは、Carpetsmokerの回答（動的であるため気に入った）に対する私の見解であり、select2 v4用にクリーンアップおよび更新されています。

$('#selectField').on('select2:open', function (e) {
  var container = $(this).select('select2-container');
  var position = container.offset().top;
  var availableHeight = $(window).height() - position - container.outerHeight();
  var bottomPadding = 50; // Set as needed
  $('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px');
});

score 2 · Accepted Answer

Select2 4.0 を使用しています。これは私にとってはうまくいきます。Select2 コントロールは 1 つしかありません。

.select2-selection.select2-selection--multiple {
    min-height: 25px;
    max-height: 25px;
}

score 1 · Accepted Answer

select2.css の後に別の css ファイルをエンキューし、その css に次を追加します。

.select2-container .select2-selection {
  height: 34px; 
}

つまり、選択ボックスの高さを 34px にしたい場合です。

score 1 · Accepted Answer

私は同様の問題を抱えていましたが、これらの解決策のほとんどは近いですが、葉巻はありません. 最も単純な形式で機能するものは次のとおりです。

.select2-selection {
    min-height: 10px !important;
}

min-height は、必要に応じて設定できます。高さは必要に応じて拡張されます。個人的には、パディングが少し不均衡で、フォントが大きすぎると感じたので、ここにも追加しました.

score 1 · Accepted Answer

ここで誰かが入力スタイルとbootstrap4のフォームグループの高さをselect2と一致させようとしている場合、私がしたことは次のとおりです。

.select2-container{
    .select2-selection{
        height: 37px!important;
    }
    .select2-selection__rendered{
        margin-top: 4px!important;
    }
    .select2-selection__arrow{
        margin-top: 4px;
    }
    .select2-selection--single{
        border: 1px solid #ced4da!important;
    }
    *:focus{
        outline: none;
    } 
}

これにより、アウトラインも削除されます。

score 0 · Accepted Answer

私見、高さを固定数に設定することはめったに役に立ちません。画面上で利用可能な任意のスペースに設定すると、はるかに便利です。

これはまさにこのコードが行うことです:

$('select').on('select2-opening', function() {
    var container = $(this).select2('container')
    var position = $(this).select2('container').offset().top
    var avail_height = $(window).height() - container.offset().top - container.outerHeight()

    // The 50 is a magic number here. I think this is the search box + other UI
    // chrome from select2?
    $('ul.select2-results').css('max-height', (avail_height - 50) + px)
})

これはselect2 3.5用に作成しました。私は 4.0 でテストしませんでしたが、ドキュメントによると、おそらく 4.0 でも動作するでしょう。

score -2 · Accepted Answer

すばやく簡単に、これをページに追加します。

<style>
    .select2-results {
        max-height: 500px;
    }
</style>

jquery - select2ボックスの高さを変更するにはどうすればよいですか

31 に答える 31

Related

Reference