select2入力の幅を設定します（Angular-uiディレクティブを介して）

StackOverflow https://stackoverflow.com//questions/12683907

質問

私はこのplunkr（select2+angulat-ui）を動作させるのに問題があります。

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

ローカル設定では、select2が動作しますが、説明されているように幅を設定することはできません ドキュメント.使用するには狭すぎます。

enter image description here

お疲れさまでした。.

編集:Plnkrを気にしないで、私はここで働いているフィドルを見つけました http://jsfiddle.net/pEFy6/

最初の要素の幅に折りたたむのはselect2の動作のようです。私はブートストラップを通して幅を設定することができました class="input-medium" .なぜangular-uiが設定パラメータを取らないのかはまだわかりません。

役に立ちましたか？

解決

要素幅を保持するために解決する属性幅を指定する必要があります。 

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

他のヒント

私の場合は、ゼロ以上の丸薬があればSELECT2が正しく開くだろう。

しかし、1つ以上の丸薬があれば、それらをすべて削除した場合、それは最小の幅に縮小します。私の解決策は単に：です 

$("#myselect").select2({ width: '100%' });
.

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

Select2バージョン3.4.0以降の起動問題を解決し、すべての奇数の場合を処理する属性dropdownAutoWidthがあります。メモデフォルトではオンになっていません。ユーザーが選択を行うと、その属性が使用されている場合はallowClearの幅を追加し、プレースホルダテキストを正しく処理しても構いません。 

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

SELECT2 V4.0.3 

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
.

SELECT2の> 4.0で私はを使っています 

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

これらの他の人はうまくいきませんでした：

  • dropdowncsclass： 'bigdrop'
  • 幅： '100％'
  • width： 'restve'

スクリプト内のメソッドコンテナCSSの追加： 

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

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

Widthを'resolve'に設定するとうまくいきませんでした。代わりに、selectに「width：100％」を追加し、cssを次のように変更しました :

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

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

class="input-medium"

ブートストラップから、ウィンドウのサイズを変更した後でも、選択は常にコンテナに残っているため（応答）

あなたはこのように試すことができます。それは私のために働く

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

Hide/showまたは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();
    }
});

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   
}
.

width width resolveオプションを選択2関数に 

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

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

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

問題を分類します

Bootstrap 4 を使用して構築された最近のプロジェクトでは、上記の方法をすべて試していましたが、何も機能しませんでした。私のアプローチは、 jquery>を使用して jquery を使って jquery>を使用して library> css を編集することでした。 

 // * 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>
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top