Wie ändere ich die Höhe der select2-Box?

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?

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

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.

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

Diese Arbeit für mich

.select2-container--default .select2-results>.select2-results__options{
    max-height: 500px !important;
}

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%);
}

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:

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

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');
});

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
}

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!

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

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.

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

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

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

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.

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.

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__renderedund select2-selection__arrowvertikal ausrichten:

.select2-container .select2-selection, 
.select2-selection__rendered, 
.select2-selection__arrow {
    height: 48px !important;
    line-height: 48px !important;
}

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)

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.

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"});

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.

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

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
}

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

Wenn Sie mehrere haben select2und 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;
  }

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-classIn Ihrer CSS-Datei.

Grüße.

Es gibt ein Problem: Klassennamen, select2*die nicht kopiert werden.

Fügen Sie dies schnell und einfach zu Ihrer Seite hinzu:

<style>
    .select2-results {
        max-height: 500px;
    }
</style>