web-dev-qa-db-ja.com

select2が応答しない、幅がコンテナより大きい

ASP.NETページのselect2ドロップダウンの幅に問題があります。デバイス画面のChromeエミュレーター）でページを表示しようとすると、select2は含まれているdivよりも大きく、右側では画面から消えます。どこにも設定しなかった_style="width: 498px;"_要素にスタイル属性_<span class="select2 select2-container select2-container--bootstrap select2-container--below">_を自動的に追加しますdocument.ready function（）に$("#ContentPlaceHolderContent_mySelect").select2();を設定するだけですブロック内：

_<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>
_

Style = "width"オプションを削除するにはどうすればよいですか？

javascriptjqueryhtmlcsstwitter-bootstrap
15
Alfredo Torre

Select2はクラス.select2を追加します。 cssを使用して、スクリプトの動作をオーバーライドできます。ここでは、100% widthを使用して、select2に!importantを設定します。そうしないと、select2の幅は24ピクセルになります。

何らかの原則を使用して、select2が生成する他のクラスをさらにカスタマイズできます。

$(document).ready(function(){
$("#mySelect").select2();
});
.select2 {
width:100%!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>
32
Vlado Pandžić

これは私のために働く：

$('select').select2({
    width: '100%'
});

cSSを追加します。

.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; Word-break: break-all; }

必要に応じて、CSS「！important」に追加します。

8
Mario62RUS

!importantを使用する必要はありません。次のようにmax-widthでオーバーライドできます。

.select2{
    max-width: 100%;
}
0
gdfgdfg