Höhe von select2 einstellen

Question

Wie kann die Höhe des Dropdown-Menüs select2 erhöht werden?

habe ich versucht, die Idee bei https://github.com/select2/select2/issues/144 vorgeschlagen:

.select2-results { 
    max-height: 500px; 
} 

jedoch, das nicht funktioniert. Wenn ich stattdessen die min-height Eigenschaft festlegen, wird die Größe erhöht, aber ich möchte nicht eine 500px riesige Dropdown haben, wenn es nur 1 oder 2 Elemente gibt ... also min-height ist nicht wirklich eine Option.

Ich möchte, dass das Dropdown-Feld seine Höhe dynamisch an den Inhalt anpasst, aber seine Höhe bis zu 500 Pixel erhöht, bevor eine Bildlaufleiste angezeigt wird.

Answer 1

Versuchen zu verwenden:

.select2-results__options { 
    max-height: 500px; 
} 

Wenn das nicht versuchen funktioniert hinzufügen !important so überschreiben sie es standardmäßig max-height ist (versuchen Sie beide Methoden, Ihre und meine).

Answer 2

Ich glaube, Sie sowohl die .select2-drop und .select2-results Klassen festlegen müssen, wie folgt:

.select2-drop { 
    max-height: /* Your value here */; 
    overflow: scroll; 
} 

.select2-results { 
    max-height: 100%; 
} 

Dies stellt sicher, dass die Ergebnisse nicht in der Höhe begrenzt sind und dass die Drop-Down ist noch brauchbar. Wenn Sie es testen, sollten Sie sehen, dass es für variable Listenlängen funktioniert, egal wie Sie die maximale Höhe auf .select2-drop setzen. Kürzere Listen sollten zum Inhalt passen, und lange Listen sollten innerhalb dieses Limits scrollen.