Ich liebe das Feld select2 von https://github.com/ivaynberg/select2. Ich verwende die Option format :, um jedes Element zu formatieren, und es sieht großartig aus.
Alles ist in Ordnung, außer dass das ausgewählte Element aufgrund eines Bildes größer als die Höhe des Auswahlfelds ist.
Ich weiß, wie man die Breite ändert, aber wie ändere ich die Höhe so, dass nach Auswahl des Elements das gesamte Element angezeigt wird (ca. 150 Pixel).
Hier ist meine Einweihung:
<script>
$("#selboxChild").select2({
matcher: function(term, text) {
var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text);
return t.toUpperCase().indexOf(term.toUpperCase()) >= 0;
},
formatResult: formatChild,
formatSelection: formatChild,
escapeMarkup: function(m) {
return m;
}
});
</script>
und hier ist mein Auswahlfeld
<select id="selboxChild" style="width: 300px; height: 200px">
<option value="">No child attached</option>
</select>
Zur Verdeutlichung: Ich möchte NICHT, dass sich die Höhe jeder Option ändert. Ich suche nach dem Auswahlfeld, um die Höhe zu ändern, nachdem Sie ein Kind ausgewählt haben.
Wenn die Seite zum ersten Mal geladen wird, wird "Kein Kind ausgewählt" angezeigt. Wenn Sie auf die Dropdown-Liste klicken und ein Kind auswählen, wird das Bild des Kindes angezeigt. JETZT brauche ich das Auswahlfeld zum Erweitern! Andernfalls wird das Bild des Kindes abgeschnitten.
Versteht jemand?
quelle
Antworten:
Sie sollten Ihrem CSS die folgenden Stildefinitionen hinzufügen:
.select2-selection__rendered { line-height: 31px !important; } .select2-container .select2-selection--single { height: 35px !important; } .select2-selection__arrow { height: 34px !important; }
quelle
Sie könnten dies mit einem einfachen CSS tun. Nach dem, was ich gelesen habe, möchten Sie die Höhe des Elements mit der Klasse "select2-selection" festlegen.
.select2-choices { min-height: 150px; max-height: 150px; overflow-y: auto; }
Das sollte Ihnen eine festgelegte Höhe von 150px geben und es wird bei Bedarf gescrollt. Passen Sie einfach die Höhe an, bis Ihr Bild wie gewünscht passt.
Sie können auch CSS verwenden, um die Höhe der select2-Ergebnisse festzulegen (den Dropdown-Bereich des select-Steuerelements).
ul.select2-results { max-height: 200px; }
200px ist die Standardhöhe. Ändern Sie sie daher für die gewünschte Höhe des Dropdowns.
quelle
.select2-choices
scheint keine Auswirkung zu haben. Die Einstellungul.select2-results
funktioniert..select2-results,.select2-results__options
jetzt sein soll, mit der!important
Flagge!important
wenn Sie Ihren Container hinzufügen, zB:.my-select2-wrapper .select2-results > .select2-results__options
Sie möchten wahrscheinlich zuerst Ihrer select2 eine spezielle Klasse zuweisen und dann das CSS nur für diese Klasse ändern, anstatt alle select2-CSS-Site zu ändern.
$("#selboxChild").select2({ width: '300px', dropdownCssClass: "bigdrop" });
SCSS
.bigdrop.select2-container .select2-results {max-height: 200px;} .bigdrop .select2-results {max-height: 200px;} .bigdrop .select2-choices {min-height: 150px; max-height: 150px; overflow-y: auto;}
quelle
Diese Arbeit für mich
.select2-container--default .select2-results>.select2-results__options{ max-height: 500px !important; }
quelle
Bearbeiten Sie die Datei select2.css. Gehen Sie zur Höhenoption und ändern Sie:
.select2-container .select2-choice { display: block; height: 36px; padding: 0 0 0 8px; overflow: hidden; position: relative; border: 1px solid #aaa; white-space: nowrap; line-height: 26px; color: #444; text-decoration: none; border-radius: 4px; background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); background-image: -o-linear-gradient(bottom, #eee 0%, #fff 50%); background-image: -ms-linear-gradient(top, #fff 0%, #eee 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); background-image: linear-gradient(top, #fff 0%, #eee 50%); }
quelle
Ich bin hierher gekommen, um nach einer Möglichkeit zu suchen, die Höhe des select2-fähigen Dropdowns festzulegen. Das, was für mich funktioniert hat:
.select2-container .select2-choice, .select2-result-label { font-size: 1.5em; height: 41px; overflow: auto; } .select2-arrow, .select2-chosen { padding-top: 6px; }
VOR:
NACH:
quelle
Die ausgewählte Antwort ist korrekt, aber Sie sollten die Datei select2.css nicht bearbeiten müssen . Sie können Folgendes zu Ihrer eigenen benutzerdefinierten CSS-Datei hinzufügen.
.select2-container .select2-choice { display: block!important; height: 36px!important; white-space: nowrap!important; line-height: 26px!important; }
quelle
Hier ist meine Sicht auf die Antwort von Carpetsmoker (die mir aufgrund ihrer Dynamik gefallen hat), die für select2 v4 bereinigt und aktualisiert wurde:
$('#selectField').on('select2:open', function (e) { var container = $(this).select('select2-container'); var position = container.offset().top; var availableHeight = $(window).height() - position - container.outerHeight(); var bottomPadding = 50; // Set as needed $('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px'); });
quelle
var bottomPadding = 70;
Anscheinend haben sich die Stylesheet-Selektoren im Laufe der Zeit geändert. Ich verwende select2-4.0.2 und der richtige Selektor zum Einstellen der Boxhöhe ist derzeit:
.select2-container--default .select2-results > .select2-results__options { max-height: 200px }
quelle
.select2-results__options
ist der Teil, in dem andere Antworten fehlen. Ich benutze Select2 4.0.3.Faule Lösung fand ich hier https://github.com/panorama-ed/maximize-select2-height
Maximieren-Wählen2-Höhe
Dieses Paket ist kurz und einfach. Es erweitert Ihre Select2-Dropdowns auf magische Weise, um die Höhe des Fensters zu füllen.
Es berücksichtigt die Anzahl der Elemente in der Dropdown-Liste, die Position von Select2 auf der Seite, die Größe und die Bildlaufposition der Seite, die Sichtbarkeit der Bildlaufleisten und ob das Dropdown-Menü nach oben oder unten gerendert wird. Die Größe ändert sich jedes Mal, wenn das Dropdown-Menü geöffnet wird. Und minimiert, es sind ~ 800 Bytes (einschließlich Kommentare)!
(Beachten Sie, dass dieses Plugin nur für Select2 v4.xx erstellt wurde.)
$("#my-dropdown").select2().maximizeSelect2Height();
Genießen!
quelle
Fügen Sie einfach select2.css hinzu
/* Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights: */ .select2-selection__rendered { line-height: 32px !important; } .select2-selection { height: 34px !important; }
quelle
Ich weiß, dass diese Frage sehr alt ist, aber ich habe 2017 nach einer Lösung für dieselbe Frage gesucht und selbst eine gefunden.
.select2-selection { height: auto !important; }
Dadurch wird die Höhe Ihrer Eingabe basierend auf ihrem Inhalt dynamisch angepasst.
quelle
Ich benutze Select2 4.0. Das funktioniert bei mir. Ich habe nur ein Select2-Steuerelement.
.select2-selection.select2-selection--multiple { min-height: 25px; max-height: 25px; }
quelle
Keine der oben genannten Lösungen hat bei mir funktioniert. Das ist meine Lösung:
/* Height fix for select2 */ .select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow { height: 35px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 35px; }
quelle
Ich hatte die Idee dass:
.select2, .select2-search__field, .select2-results__option { font-size:1.3em!important; } .select2-selection__rendered { line-height: 2em !important; } .select2-container .select2-selection--single { height: 2em !important; } .select2-selection__arrow { height: 2em !important; }
quelle
Stellen Sie eine andere CSS-Datei nach select2.css in die Warteschlange und fügen Sie in dieser CSS Folgendes hinzu:
.select2-container .select2-selection { height: 34px; }
dh wenn Sie möchten, dass die Höhe der Auswahlbox 34px beträgt.
quelle
Ich hatte ein ähnliches Problem und die meisten dieser Lösungen sind nah, aber keine Zigarre. Folgendes funktioniert in seiner einfachsten Form:
.select2-selection { min-height: 10px !important; }
Sie können die Mindesthöhe auf einen beliebigen Wert einstellen. Die Höhe wird nach Bedarf erweitert. Ich persönlich fand die Polsterung etwas unausgeglichen und die Schrift zu groß, deshalb habe ich diese auch hier hinzugefügt.
quelle
In 4.0.6 finden Sie unten die Lösung, die für mich funktioniert hat. Musste das Dropdown-Etikett und das Pfeilsymbol einschließen
select2-selection__rendered
undselect2-selection__arrow
vertikal ausrichten:.select2-container .select2-selection, .select2-selection__rendered, .select2-selection__arrow { height: 48px !important; line-height: 48px !important; }
quelle
Ich verwende Folgendes, um die Höhe des Dropdown-Elements select2 dynamisch anzupassen, damit es gut zur Anzahl der Optionen passt:
$('select').on('select2:open', function (e) { var OptionsSize = $(this).find("option").size(); // The amount of options var HeightPerOption = 36; // the height in pixels every option should be var DropDownHeight = OptionsSize * HeightPerOption; $(".select2-results__options").height(DropDownHeight); });
Stellen Sie sicher, dass die (Standard-) maximale Höhe in CSS deaktiviert ist:
.select2-container--default .select2-results>.select2-results__options { max-height: inherit; }
(nur in Version 4 von select2 getestet)
quelle
IMHO ist es selten sinnvoll, die Höhe auf eine feste Zahl einzustellen. Das Einstellen des verfügbaren Speicherplatzes auf dem Bildschirm ist viel nützlicher.
Welches ist genau das, was dieser Code tut:
$('select').on('select2-opening', function() { var container = $(this).select2('container') var position = $(this).select2('container').offset().top var avail_height = $(window).height() - container.offset().top - container.outerHeight() // The 50 is a magic number here. I think this is the search box + other UI // chrome from select2? $('ul.select2-results').css('max-height', (avail_height - 50) + px) })
Ich habe dies für select2 3.5 gemacht. Ich habe es nicht mit 4.0 getestet, aber aus der Dokumentation geht hervor, dass es wahrscheinlich auch für 4.0 funktioniert.
quelle
Versuchen Sie dies, es ist Arbeit für mich:
<select name="select_name" id="select_id" class="select2_extend_height wrap form-control" data-placeholder="----"> <option value=""></option> <option value="1">test</option> </select> .wrap.select2-selection--single { height: 100%; } .select2-container .wrap.select2-selection--single .select2-selection__rendered { word-wrap: break-word; text-overflow: inherit; white-space: normal; } $('.select2_extend_height').select2({containerCssClass: "wrap"});
quelle
Wenn hier jemand versucht, Eingabestile und die Formulargruppenhöhe von bootstrap4 mit select2 abzugleichen, habe ich Folgendes getan:
.select2-container{ .select2-selection{ height: 37px!important; } .select2-selection__rendered{ margin-top: 4px!important; } .select2-selection__arrow{ margin-top: 4px; } .select2-selection--single{ border: 1px solid #ced4da!important; } *:focus{ outline: none; } }
Dadurch werden auch die Umrisse entfernt.
quelle
Für v4.0.7 Sie können die Höhe erhöhen, indem Sie CSS-Klassen wie in diesem Beispiel überschreiben:
.select2-container .select2-selection--single { height: 36px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
quelle
Sehr einfache Möglichkeit zum Anpassen von Select 2 gerenderten Komponenten mit wenigen Zeilen CSS-Styling:
// Change the select container width and allow it to take the full parent width .select2 { width: 100% !important } // Set the select field height, background color etc ... .select2-selection { height: 50px !important background-color: $light-color } // Set selected value position, color , font size, etc ... .select2-selection__rendered { line-height: 35px !important color: yellow !important }
quelle
Wenden Sie dieses Überschreibungs-CSS an, um die Höhe des Ergebnisfelds zu erhöhen
.select2-container--bootstrap4 .select2-results>.select2-results__options { max-height: 20em; }
quelle
Wenn Sie mehrere haben
select2
und nur die Größe eines ändern möchten. mach das:Holen Sie sich ID zu Ihrem Element:
<div id="skills"> <select class="select2" > </select> </div>
und füge dieses CSS hinzu:
#skills > span >span >span>.select2-selection__rendered{ line-height: 80px !important; }
quelle
Sie müssen die Höhe nicht für alle select2 ändern - Quellklassen
<input>
werden in den select2-Container kopiert, sodass Sie sie nach Eingabeklassen formatieren können. Wenn Sie beispielsweise die Höhe einiger Instanzen von select2 formatieren möchten, fügen Sie dem Quellelement die Klasse your-class hinzu<select>
und verwenden Sie dann ".select2-container."your-class
In Ihrer CSS-Datei.Grüße.
Es gibt ein Problem: Klassennamen,
select2*
die nicht kopiert werden.quelle
Fügen Sie dies schnell und einfach zu Ihrer Seite hinzu:
<style> .select2-results { max-height: 500px; } </style>
quelle