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 des Gerätebildschirms anzuzeigen, ist select2 größer als das enthaltende div und verschwindet rechts aus dem Bildschirm. Ich habe bei der Codeinspektion gesehen, dass automatisch ein Stilattribut hinzugefügt wird style="width: 498px;" in dem <span class="select2 select2-container select2-container--bootstrap select2-container--below"> Element, das ich nirgendwo gesetzt habe. Die einzige Operation, die ich durchgeführt habe, ist die Einstellung $("#ContentPlaceHolderContent_mySelect").select2(); in der document.ready-Funktion(). 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 diese Option style=”width” entfernen?

Select2 fügt Klasse hinzu .select2. Sie können mit CSS überschreiben, was das Skript tut. Hier bin ich auf select2 eingestellt 100% widthverwenden !important. Wenn ich das nicht tun würde, hätte select2 eine Breite von 24 Pixel.

Sie können andere Klassen weiter anpassen select2 erzeugt nach irgendeinem Prinzip.

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

Das funktioniert bei mir:

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

und CSS hinzufügen:

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

Fügen Sie bei Bedarf “!important” zu CSS hinzu.

Wenn Sie Bootstrap verwenden, verwenden Sie den folgenden Stil

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

versuchen Sie es mit dropdownParent

$('#mySelect2').select2({
  dropdownParent: $('#myModal')
});

https://select2.org/dropdown#dropdown-placement

Überlauf bekommen? Mach es auch mit JS

Bei Verwendung von CSS width:100% treten manchmal Probleme beim Scrollen auf, wenn einige Elemente eine Überlaufeigenschaft haben. Ich würde auch empfehlen, js zu verwenden.

Fügen Sie unten js hinzu

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

Fügen Sie unten CSS hinzu

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

/*Kopiert von bereits gegeben 🙂 */

Das <span> mit dem .select2 Klasse wird vom Select2-Plug-in direkt nach der Erstellung eines neuen select2 für eine bestimmte Klasse erstellt <select>.

Um dies zu machen span.select2 element responsive, haben wir möglicherweise einige Möglichkeiten, wie zum Beispiel:

1. Verwenden Sie eine %-Breite (entweder auf dem Original, bevor Sie das select2-Element erstellen, oder in der select2 Breite Konfigurationsoption).
2. Überschreiben über CSS (z. B. wenn wir verwenden @media() Anfragen). Beachten Sie, dass dies die Funktionalität oder Anzeige des Plugins beeinträchtigen kann.

Für die 2. können wir die verwenden benachbarter Geschwisterkombinator (+) mit dem !important auf den Breitenwert, um unsere select2’s zu stylen <span>da normalerweise die Spanne von select2 erstellt und direkt nach unserer eingefügt wird <select>.

Ein Beispiel unten:

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

Notiz: select und span Elementselektoren werden nicht benötigt, @media als beispielhafter Anwendungsfall.

Sie müssen nicht verwenden !importantSie können es einfach mit überschreiben max-width wie:

.select2{
    max-width: 100%;
}