web-dev-qa-db-ja.com

bootstrap 3ナビゲーションバーでselect2 v4検索ボックスを応答可能にする方法は？

bootstrap 3ナビゲーションバー内にselect2検索ボックスを配置しました。問題は、ブラウザーのサイズを変更すると、検索ボックスが自動サイズ変更されず、ナビゲーションバーがオーバーフローしてしまうことです。 select2ボックスを応答可能にする方法を明確にします。

こちらをご覧ください： https://jsfiddle.net/vgoklani/3vtrgkc7/13/

Jsfiddleで結果ウィンドウのサイズを変更する必要があります。幅が十分に長くない場合、検索ボックスは非表示になり、表示されません。私が欲しいのは、ウィンドウの幅に基づいて幅がリサイズされるように、検索ボックスが反応するようにすることです。

    <nav class="navbar navbar-dark navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
                </button>
                <a class="navbar-brand">NAME</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
                    </div>
                </form>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
                    </div>
                </form>

            </div>
        </div>
    </nav>

ありがとう

twitter-bootstraptwitter-bootstrap-3jquery-select2jquery-select2-4
18
vgoklani

何をしたいのかよくわかりません。

あなたはこれを試すことができます：

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}
31
Seb33300

これを解決するには、data- *属性を設定します。

<select id="select2" class="form-control" data-width="100%">
    ...
</select>
11
lexxl

これは私にとってはうまくいきます：

$(window).resize(function() {
    $('.select2').css('width', "100%");
});
11
Filipe Daniel

私はselect 2バージョン4を使用しています。bootstrap 3の場合、select 2はコードなしで応答します。

Select 2でページを開いてサイズを変更した場合、select 2のサイズは変更されず、応答しないと思われる場合があることに注意してください。ページを新しいサイズで更新すると、select 2がページに正しく収まることがわかります。

これは、select 2がコンポーネントをレンダリングし、ドキュメントの終了時にサイズを計算し、ページのサイズを変更するときにコンポーネントを更新しないためです。エンドユーザーがブラウザのサイズを変更することを期待していないため、これは十分に許容されます（これは、テストのために開発中に通常行うことです！）

私の経験では、select 2の幅を手動で変更した場合、select2ドロップダウンが選択コンテ​​ナの上部またはボタンに正確に適合しない場合があります。

一部のcssが必要な唯一のケースは、サイトが携帯電話で閲覧され、ユーザーが携帯電話を回転させることで画面を回転できる場合です。

bootstrap列を考慮してselect 2のサイズを変更するため、この下ではcssが役立ちます：

/*Make select2 responsive*/
[class*="col-"] .select2-container {
    width:100%!important;
}
[class*="col-"] .select2-container .select2-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .select2-container .select2-drop {
    width: 100%!important;
}
6
Alireza Fattahi

select2が行うことの1つは、生成する要素に固定幅を設定することです。これにより、デフォルトでは応答しなくなります。

JavaScriptを少し使用して、$(window).resize()イベントの各<select>要素の幅を設定し、select2プラグインを再初期化できます。

注：要素を応答させるために、固定幅（400pxなど）を設定することはできませんが、代わりに流動的な幅を設定してください。私の例では、各選択の幅は本体の幅の3分の1であると想定しています。

// Assume that each select will have as width the 1/3 of the body width
// Get body width and divide it with 3 and apply it to each select
var width = $('body').width() / 3;
$('#Search1, #Search2').width(width);

$("#Search1, #Search2").select2({
    data: data
});

// Put same code to the window.resize handler to run again when the window is resized
$(window).resize(function() {
    var width = $('body').width() / 3;
    $('#Search1, #Search2').width(width);

    $("#Search1, #Search2").select2({
        data: data
    });
});

ここ は実用的なデモです。

2
Tasos K.

以下にCSSを追加し、それをあなたのHTMLの最後に参照してください

 @media screen {
    .select2 {
        width: 100% !important;
    }
}
1
Tejas Bhatt

適用しようとしましたcol-入力フィールドに？このような "multiple" id="Search1" style="height:34px"></select>

1
Akhil Namboothiri

JavaScript：

$("#myid").select2({
   width:'100%'
});
0
Aruna Warnasooriya

その単なるサンプルであり、必要に応じてよりクリーンにすることができます。numberは、select2に指定したクラスの名前です。

$screenWidth=$(this).width();

function checkWindowWidth() {
 if($screenWidth<767){
 }

 if(991>$screenWidth && $screenWidth>768){
    $('.number',.number+span).css('width','100%');
 }

 if($screenWidth<1199 && $screenWidth>992){
    $('.number,.number+span').css('width','45%');
 }

 if($screenWidth>1199){
    $('.number,.number+span').css('width','33%');   
 }
}
0
Alisanie

Alireza Fattahiがすでに述べたように、bootstrapテーマを使用したselect2 v4はすでに応答性があります。ブラウザのサイズ変更の問題を処理するには、サイズ変更イベントでselect2を再初期化します。

    $(window).resize(function () {
        $("select").select2();
    });

これをさらに確認した後、select2コントロールを再初期化したくないという結論に達しました。これはやり過ぎです。作成したときとまったく同じ方法で再初期化するように注意しないと、期待どおりに機能しません。

レスポンシブコンテナーにコントロールを配置しているため、コントロールが初期化された後、select2コンテナーのインライン幅を取り除くだけでした。私がテストした限りでは、ウィンドウのサイズ変更イベントを処理する必要もありません。

    //Initialize select2
    $("select").select2({
       //your options
    });

    //Remove inline width after initialization
    $(".select2.select2-container").css("width", "");
0
rjax

min-width/.select2-containerクラスは20emデフォルトでは、オーバーフローしないように減少させます。

必要に応じて調整します。

.select2-container {
  min-width: 17em;
}
0
busla