Anscheinend geht das nicht:
select[multiple]{
height: 100%;
}
Dadurch hat die Auswahl 100% Seitenhöhe …
auto funktioniert auch nicht, ich bekomme immer noch die vertikale Bildlaufleiste.
Irgendwelche anderen Ideen?
Führen Sie eine Mehrfachauswahl durch, um die Höhe an Optionen ohne Bildlaufleiste anzupassen
Lesezeit: 4 Minuten
13291400cookie-checkFühren Sie eine Mehrfachauswahl durch, um die Höhe an Optionen ohne Bildlaufleiste anzupassen
Alex
Alex
Ich denke, Sie können die verwenden size Attribut. Es funktioniert in allen neueren Browsern.
<select name="courses" multiple="multiple" size="30" style="height: 100%;">
-
Hallo, wie unterscheidet sich das von dem, was in der Frage angegeben wurde, dass es nicht funktioniert?
– Gravieren
25. September 2012 um 19:16 Uhr
-
Hallo, es ist anders, weil es das Größenattribut verkörpert. Die Eingangsfrage bezieht sich nur auf das Höhenattribut
– Alex
26. September 2012 um 12:29 Uhr
-
Ah okay. Es schrumpft die Box nicht wirklich auf die Größe des Inhalts, Sie müssen den Zahlenwert manuell festlegen, was in Ordnung ist, wenn Sie wissen, wie viele Optionen es gibt, aber ein größeres Problem, wenn es eine dynamische Anzahl von Optionen gibt . In diesem Fall müssten Sie beim Ausfüllen des Felds das Größenattribut ändern. Jetzt verstehe ich, danke für die Klarstellung.
– Gravieren
26. September 2012 um 16:44 Uhr
-
Ach komm schon! Wenn Sie den Server “bevölkern”, wissen Sie, wie viele es sein werden. Und wenn Sie mit AJAX “füllen” können, ist das Ändern eines bescheidenen Attributs keine Herausforderung. Sie können die Optionen in JS sogar nach dem “Auffüllen” zählen.
– Tomasz Gandor
7. März 2013 um 21:18 Uhr
-
Es hat funktioniert, aber auch die Höhe von wurde entsprechend der Größe erhöht und verzerrte dadurch mein Layout. ;(
– Schubham
27. September 2017 um 9:16 Uhr
-
Wie kann ich diesen Wert in CSS angeben?
– Lei Yang
18. September 2019 um 9:29 Uhr
Alt, aber das wird das tun, wonach Sie suchen, ohne dass Sie jquery benötigen. Der versteckte Überlauf beseitigt die Bildlaufleiste und das Javascript macht sie auf die richtige Größe.
<select multiple="multiple" id='select' style="overflow:hidden">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="xyz">xyz</option>
</select>
Und nur eine kleine Menge Javascript
var select = document.getElementById('select');
select.size = select.length;
Abhishek Sharma
Für jQuery können Sie dies versuchen. Ich mache immer folgendes und es funktioniert.
$(function () {
$("#multiSelect").attr("size",$("#multiSelect option").length);
});
Sie können dies nur in Javascript/JQuery tun, Sie können es mit der folgenden JQuery tun (vorausgesetzt, Sie haben Ihrer Auswahl eine Multiselect-ID gegeben):
$(function () {
$("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});
-
Die gleiche Idee, ohne sich auf die Zeilenhöhe zu verlassen:
$('select.expandable').each(function() { $(this).attr('size', $(this).find('option').length) })– Francesc Rosas
5. September 2012 um 16:43 Uhr
-
@FrancescRosàs Perfekt! Schade, dass dies in einem Kommentar begraben ist, anstatt die akzeptierte Antwort zu sein.
– Nik
25. Mai 2016 um 21:54 Uhr
Nielsvh
Ich weiß, die Frage ist alt, aber wie das Thema nicht geschlossen ist, werde ich meine Hilfe geben.
Das Attribut “Größe” löst Ihr Problem.
Beispiel:
<select name="courses" multiple="multiple" size="30">
-
Die gleiche Idee, ohne sich auf die Zeilenhöhe zu verlassen:
$('select.expandable').each(function() { $(this).attr('size', $(this).find('option').length) })– Francesc Rosas
5. September 2012 um 16:43 Uhr
-
@FrancescRosàs Perfekt! Schade, dass dies in einem Kommentar begraben ist, anstatt die akzeptierte Antwort zu sein.
– Nik
25. Mai 2016 um 21:54 Uhr
select enthalten könnte optgroup was jeweils eine Zeile dauert:
<select id="list">
<optgroup label="Group 1">
<option value="1">1</option>
</optgroup>
<optgroup label="Group 2">
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select>
<script>
const l = document.getElementById("list")
l.setAttribute("size", l.childElementCount + l.length)
</script>
In diesem Beispiel insgesamt size ist (1+1)+(1+2)=5.
-
Beide obigen Antworten sind technisch korrekt, aber dies ist die interessantere Antwort.
– Russellmanie
2. September 2016 um 19:34 Uhr
-
Ich bevorzuge diese Antwort, da ich nicht weiß, wie viele Elemente in der Liste erscheinen werden. Aber ich setze nur: l.setAttribute(‘size’, l.childElementCount +1); (nicht doppelt so lang wie der obige Code zeigt)
– Robert Achmann
6. September 2017 um 15:07 Uhr
Ich denke, Sie stecken mit der Verwendung von Javascript fest. Ich glaube nicht, dass es eine Möglichkeit gibt, ein Auswahlfeld automatisch zu dehnen, nur um den Inhalt zu enthalten.
– zufälliger_Benutzername
30. März 2012 um 13:30 Uhr
Reine CSS-Lösung: stackoverflow.com/a/55969271/7910454
– Leonheess
3. Juni 2020 um 10:46 Uhr