wake-up-neo.com

select2 reagiert nicht, Breite größer als Container

Ich habe ein Problem mit der Breite eines select2-Dropdowns auf meiner ASP.NET-Seite. Wenn ich versuche, die Seite mit dem Chrome-Emulator der Geräte anzuzeigen, ist select2 größer als das enthaltende div, und rechts wird der Bildschirm ausgeblendet. Ich habe bei der Codeüberprüfung gesehen, dass automatisch ein Stilattribut style="width: 498px;" im <span class="select2 select2-container select2-container--bootstrap select2-container--below">-Element hinzugefügt wird, das ich nirgendwo festgelegt habe. Die einzige Operation, die ich gemacht habe, ist $("#ContentPlaceHolderContent_mySelect").select2(); in der document.ready-Funktion () zu setzen. Mein select2-Dropdown ist in einem Block enthalten:

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

Wie kann ich die style = "width" Option entfernen?

8
Alfredo Torre

Select2 fügt die Klasse .select2 hinzu. Sie können das Skript mit css ..__ überschreiben. Hier habe ich select2 so eingestellt, dass es 100% width mit !important hat. Wenn ich das nicht machen würde, hätte select2 eine Breite von 24px.

Sie können andere Klassen, die select2 generiert, nach einem bestimmten Prinzip weiter anpassen.

$(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>

22
Vlado Pandžić

Das funktioniert für mich:

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

und füge CSS hinzu:

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

Fügen Sie CSS "! Important" hinzu, wenn Sie benötigen.

8
Mario62RUS

Sie brauchen !important nicht zu verwenden, Sie können es einfach mit max-width wie folgt überschreiben:

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

Der <span> mit der .select2-Klasse wird vom Select2-Plugin direkt nach der Erstellung eines neuen select2 für einen bestimmten <select> erstellt.

Um dieses span.select2-Element ansprechbar zu machen, haben wir möglicherweise einige Möglichkeiten, wie zum Beispiel:

  1. Verwenden Sie eine Breite von% (entweder auf dem Original vor dem Erstellen des select2-Elements oder in der Option select2 width configuration).
  2. Überschreiben Sie über CSS (zum Beispiel, wenn wir @media()-Abfragen verwenden). Beachten Sie, dass dies die Funktionalität oder Anzeige des Plugins beeinträchtigen kann.

Für den zweiten können wir den benachbarten Geschwister-Kombinator (+) mit dem !important auf dem width-Wert verwenden, um den <span> unserer select2 zu formatieren, da normalerweise die Spanne von select2 erstellt und direkt nach unserem <select> eingefügt wird.

Ein Beispiel unten:

@media (max-width: 400px) {
  select.my-x-select + span.select2 {
    width: 200px !important;
  }
}

Hinweis:select- und span-Elementselektoren werden nicht benötigt, @media als Beispielanwendungsfall.

0
edmundo096