168

このプランカー(select2 + angulat-ui)を機能させるのに問題があります。

http://plnkr.co/edit/NkdWUO?p=preview

ローカルセットアップでは、select2が機能しますが、ドキュメントで説明されているように幅を設定できません。狭すぎて使えません。

ここに画像の説明を入力してください

ありがとうございました。

編集:plnkrを気にしないでください、私はここで実用的なフィドルを見つけました http://jsfiddle.net/pEFy6/

最初の要素の幅に折りたたむのはselect2の動作のようです。ブートストラップを介して幅をclass="input-medium"設定できます。それでも、angular-uiが構成パラメーターを受け取らない理由はわかりません。

4

14 に答える 14

266

私の場合、ピルが0個以上あれば、select2は正しく開きます。

しかし、1つ以上のピルがあり、それらをすべて削除すると、最小幅に縮小します。私の解決策は単純でした:

$("#myselect").select2({ width: '100%' });      
于 2014-01-18T01:26:42.367 に答える
228

要素の幅を維持するには、解決する属性の幅を指定する必要があります

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
于 2012-11-24T16:54:11.333 に答える
55

これは古い質問ですが、新しい情報はまだ投稿する価値があります...

Select2バージョン3.4.0以降dropdownAutoWidth、問題を解決し、すべての奇妙なケースを処理する属性があります。デフォルトではオンになっていないことに注意してください。ユーザーが選択すると動的にサイズ変更され、allowClearその属性が使用されている場合は幅が追加され、プレースホルダーテキストも適切に処理されます。

$("#some_select_id").select2({
    dropdownAutoWidth : true
});
于 2014-06-01T11:53:20.987 に答える
24

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
于 2017-01-20T13:10:34.543 に答える
13

select2が4.0を超える場合、私は使用しています

$("select").select2({
  dropdownAutoWidth: true
});

これらの他のものは機能しませんでした:

  • dropdownCssClass:'bigdrop'
  • 幅:「100%」
  • 幅:'解決'
于 2017-05-02T05:46:19.353 に答える
10

次のように、スクリプトにメソッドコンテナcssを追加します。

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

選択した幅をdivの幅と同じに設定します。

于 2014-02-21T12:30:08.363 に答える
7

select2関数に幅解決オプションを追加します

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

以下のCSSをスタイルシートに追加した後

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

問題を分類します

于 2019-06-20T05:48:07.283 に答える
2

幅を「解決」に設定してもうまくいきませんでした。代わりに、selectに「width:100%」を追加し、cssを次のように変更しました。

.select2-offscreen {position: fixed !important;}

これは私のために働いた唯一の解決策でした(私のバージョンは2.2.1です)あなたの選択はすべての利用可能な場所を取ります、それは使用するよりも良いです

class="input-medium"

ウィンドウのサイズを変更した後でも、選択は常にコンテナ内にとどまるため、ブートストラップから(レスポンシブ)

于 2013-08-20T14:48:47.907 に答える
2

これをスタイルシートに追加します。

.select2 {
  width: unset !important;
}
于 2021-03-16T14:49:03.043 に答える
1

ここにも私のソリューションを追加したかった。これは、上記のRavinduの回答に似ています。

width: 'resolve',select2内にプロパティとして追加しました:

    $('#searchFilter').select2({
        width: 'resolve',
    });

min-width次に、プロパティをselect2-containerに追加しました!important

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

select要素で、機能するためにstyle='100px !important;'必要な属性!important

<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">
于 2020-11-10T16:18:47.790 に答える
0

このように試すことができます。わたしにはできる

$("#MISSION_ID").select2();

非表示/表示またはajaxリクエストでは、select2プラグインを再初期化する必要があります

例えば:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});
于 2019-01-01T05:11:23.223 に答える
0

select2に依存しないより簡単なCSSソリューション

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}
于 2019-01-25T19:20:54.810 に答える
0

Bootstrap 4を使用して構築された最近のプロジェクトでは、上記のすべての方法を試しましたが、何も機能しませんでした。私のアプローチは、jQueryを使用してライブラリ CSSを編集し、テーブルを100%取得することでした。

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

作業デモ

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

于 2019-07-17T18:05:06.547 に答える
0

他に使用できる方法は、Selectタグにスタイルの幅を設定することです。

<select id="myselect" style="width: 20%;">
    <option>...</option>
</select>

次に、これを使用します

$(document).ready(function() { 
    $("#myselect").select2({ width: 'style' }); //This will use style attr of the select element  
});
于 2021-03-22T09:36:13.597 に答える