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

74

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?

relipse
quelle
3
Ich weiß, dass dies nicht das spezifische Problem von OP betrifft, aber Google scheint diesen Artikel zuerst zu bewerten, wenn ich nach "select2 height" suche, sodass dies möglicherweise einigen anderen Personen hilft. Wenn Sie Bootstrap verwenden und nur möchten, dass Ihre select2-Eingänge die gleiche Höhe wie die übrigen Eingänge haben, ist jetzt ein Thema verfügbar: github.com/select2/select2-bootstrap-theme
alexw

Antworten:

76

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;
}
Rodrigo
quelle
Dieser Code dient dazu, die Auswahl selbst zu vergrößern, nicht jedoch das Feld, das mit Optionen angezeigt wird, nachdem eine Auswahl getroffen wurde. Dies ist die Adresse der Frage. Diese Antwort ist falsch, weshalb der Autor der Frage eine Klarstellung hinzugefügt hat.
ftrotter
32

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.

Ryan Gill
quelle
Ich möchte eigentlich nicht, dass sich die Höhe der Auswahlmöglichkeiten unterscheidet. Ich möchte, dass sich die Höhe des tatsächlichen Auswahlfelds ändert, nachdem ich ein Kind ausgewählt habe.
Relipse
2
Die Einstellung .select2-choicesscheint keine Auswirkung zu haben. Die Einstellung ul.select2-resultsfunktioniert.
Martin Tournoij
3
Mit Version 4 sieht es so aus, als ob es .select2-results,.select2-results__optionsjetzt sein soll, mit der !importantFlagge
Brian Leishman
Mit v4 benötigen Sie die __Optionen, aber nicht, !importantwenn Sie Ihren Container hinzufügen, zB:.my-select2-wrapper .select2-results > .select2-results__options
Freedomn-M
17

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;}
Abram
quelle
Ich habe genau das getan, was Sie gesagt haben, aber nachdem das Kind ausgewählt wurde, ist die Höhe des Auswahlfelds immer noch dieselbe. Ich möchte, dass es erweitert wird, wenn ein Kind ausgewählt wird.
Relipse
Ich möchte die select2-Box schlank machen. Dafür habe ich verschiedene Möglichkeiten ausprobiert, einschließlich der oben genannten, konnte aber nicht das gewünschte Ergebnis erzielen. " //$("#themes").select2({dropdownAutoWidth:true,containerCss:{'height':'16px','line-height':'16px '}}); $ ("# theme"). select2 ({dropdownAutoWidth: true, containerCssClass: 'slim-select'}); `---- keine dieser Funktionen.
Rajeev
Dies funktionierte bei mir und da ich Bootstrap verwende, stimmte es genau mit den anderen Eingängen überein!
Cesar Bielich
10

Diese Arbeit für mich

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

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%);
}
Jason Speer
quelle
3
Dies ist die richtigste Antwort, da dadurch die Höhe des Containers und nicht die Optionen geändert werden. Das Hinzufügen des Folgenden reicht aus: .select2-container .select2-choice {height: 200px; } Damit es erst angewendet wird, nachdem ein Objekt ausgewählt wurde, fügen Sie das entsprechende CSS zu einem Änderungsereignis oder ähnlichem hinzu / ändern Sie es.
Motin
Dies ändert die Höhe des Eingabefelds select2, was nicht gewünscht wurde.
Martin Tournoij
42
Bitte gehen Sie nicht hinein und ändern Sie keine Quellcodedateien für andere Bibliotheken. Es bricht jedes Mal ab, wenn Sie eine neue Version erhalten möchten.
Fügen Sie
7

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:

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

NACH: select-2-fähiges Dropdown-Menü mit CSS-definierter Höhe Geben Sie hier die Bildbeschreibung ein

Vadym Tyemirov
quelle
Darum geht es in dieser Frage nicht
Martin Tournoij
7

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;
}
Alao
quelle
1
Ich verwende select2 v 3.5.2 und dieser Code hat bei mir funktioniert. Konnte in ihren Dokumenten nicht herausfinden, wie man die Höhe ändert. Auch sehr gültiger Punkt zum Hinzufügen zu Ihrem benutzerdefinierten CSS nicht die select2.css
dading84
5

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');
});
Booshong
quelle
Das ist die eine. Ich habe mich verändertvar bottomPadding = 70;
Rohmer
Hilf mir mit Select2 v4.0.3! "Alte" Option dropdownCssClass: 'bigdrop' scheint mit Select2 v4.x nicht mehr zu funktionieren.
5

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
}
Billynoah
quelle
.select2-results__optionsist der Teil, in dem andere Antworten fehlen. Ich benutze Select2 4.0.3.
Max Malysh
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!

DmitryBoyko
quelle
1
Es ist großartig für einen select2. Wenn Sie mehrere haben, wird die letzte Höhe angewendet, die für die letzte Auswahl berechnet wurde2, auf die es angewendet wurde
Tainmar
@ Tainmar Richtig. Vielleicht haben Sie dieses Plugin ein wenig modifiziert.
DmitryBoyko
3

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;
}
Adnan Zaheer
quelle
2

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.

EmacsVI
quelle
2

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;
}
Baqer Naqvi
quelle
2

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;
}
ErTR
quelle
2

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;
}
Amit Bhagat
quelle
1

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.

Brajinder Singh
quelle
1

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.

Wynne Crisman
quelle
1

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;
}
Şafak Gezer
quelle
1

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)

Stef Van Looveren
quelle
0

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.

Martin Tournoij
quelle
0

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"});
Saifur Rahman
quelle
0

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.

Schamseer Ahammed
quelle
0

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;
}
Areeb111
quelle
0

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
}
MUSTAPHA GHLISSI
quelle
0

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;
}
Keith Chiah
quelle
0

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;
  }
mohammad asghari
quelle
-1

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.

GeistZero
quelle
-2

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

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