Höhe eines HTML-Auswahlfelds (Dropdown)

85

Kann jemand bestätigen, dass es nicht möglich ist, die Höhe eines Dropdowns zu ändern, das angezeigt wird, wenn Sie auf ein Auswahlfeld klicken.

Das Größenattribut der Auswahl lässt es wie eine Liste aussehen, das Höhenattribut im CSS hilft auch nicht viel.

mkoryak
quelle
Das Dropdown-Menü ist ein Steuerelement auf Anwendungsebene und kein Steuerelement auf Clientebene. (leider)
Diodeus - James MacFarlane

Antworten:

91

Bestätigt.

Der herunterfallende Teil ist auf Folgendes eingestellt:

  1. Die Höhe, die benötigt wird, um alle Einträge anzuzeigen, oder
  2. Die Höhe, die benötigt wird, um xEinträge anzuzeigen (mit Bildlaufleisten, um die verbleibenden zu sehen), wo xist
    • 20 in Firefox & Chrome
    • 30 in IE 6, 7, 8
    • 16 für Opera 10
    • 14 für Opera 11
    • 22 für Safari 4
    • 18 für Safari 5
    • 11 in IE 5.0, 5.5
  3. Wenn in IE / Edge keine Optionen vorhanden sind, wird eine dumm hohe Liste mit 11 Leerzeicheneinträgen angezeigt.

Für (3) oben können Sie die Ergebnisse in dieser JSFiddle sehen

scunliffe
quelle
@scunliffe wie man (1) in Chrom
Wenn Sie size = "1" oder nichts festlegen, da dies die Standardeinstellung ist, ist Ihre Auswahl ein Dropdown-Menü gegenüber einer statischen Vertikalen in der Seitenliste. Wie bereits erwähnt, wird die tatsächliche Dropdown-Höhe vom Browser festgelegt, und als Entwickler haben wir keine Kontrolle über die Listenhöhe.
Scunliffe
4
@scunliffe Hats-off für die angegebenen Zählungen :)
Shahil M
5

Ich habe an einem Dropdown-Ersatz-JQuery-Plugin gearbeitet, um dieses Problem zu bekämpfen. Ab diesem Beitrag ist es in Bezug auf Aussehen und Funktionalität kaum mehr von einem nativen Dropdown zu unterscheiden .

Hier ist eine Demo (auch ein Link zu Downloads): http://programmingdrunk.com/current-projects/dropdownReplacement/

Hier ist die Projektseite des Plugins:

http://plugins.jquery.com/project/dropdownreplacement

(Update :) Die JQuery Plugin Seite scheint nicht mehr zu funktionieren. Ich werde mein Plugin wahrscheinlich nicht auf ihrer neuen Website veröffentlichen, wenn es funktioniert. Sie können also gerne den Link Programmierdrunk.com für Demo / Download verwenden

mkoryak
quelle
interessante Idee - Ich mag sicherlich die Möglichkeit, die gefälschte Auswahlliste zu "häuten" (ich finde viele Standardeinstellungen aus dem "nativen" Betriebssystemthema und sehe daher "seltsam" aus) und die Möglichkeit, den Inhalt in der Liste zu steuern, die ich praktisch finde ( da IE nur sehr wenige Styling-Optionen für Optionselemente bietet)
scunliffe
Der letzte Link von dieser Antwort ist tot!
Stephan
Ja, aber die Demoseite ist eine bessere Ressource als die Plugin-Site. es hat auch einen Download drauf.
Ich werde
Das sieht fantastisch aus: DI fragt sich, ob Sie Zeit haben, es mit einer späteren Version von jquery zu testen. Vielen Dank
Thang Pham
Ich nicht, aber wenn Sie dies tun, können Sie sich gerne
zurückmelden
5

NEIN . Es ist nicht möglich, die Höhe eines ausgewählten Dropdowns zu ändern, da diese Eigenschaft browserspezifisch ist.

Wenn Sie diese Funktionalität jedoch wünschen, gibt es viele Optionen. Sie können Bootstrap verwenden dropdown-menuund dessen max-heightEigenschaft definieren . Etwas wie das.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

Raman Sahasi
quelle
2

Eigentlich kannst du das irgendwie! Machen Sie sich keine Sorgen mit Javascript ... Ich habe mich bei einer Website, die ich erstelle, nur auf das Gleiche festgelegt. Wenn Sie das Attribut "Schriftgröße" in CSS für das Tag erhöhen, erhöht sich automatisch auch die Höhe. Kleinlich, aber es ist etwas, das mich sehr stört, ha ha

Aniqa Arif
quelle
Was bedeutet das ?
Anirudha Gupta
1
Ich würde annehmen, dass das Ziel darin besteht, mehr Auswahlmöglichkeiten in der Dropdown-Box anzuzeigen und nicht einfach mehr Platz einzunehmen, was diese Antwort bewirken würde.
JReader
0

Dies ist keine perfekte Lösung, aber es funktioniert irgendwie.

Fügen Sie in das Auswahl-Tag die folgenden Attribute ein, wobei 'n' die Anzahl der Dropdown-Zeilen ist, die sichtbar wären.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

Bei dieser Lösung gibt es drei Probleme. 1) Beim ersten Mausklick werden alle Elemente schnell angezeigt. 2) Die Position ist auf 'absolut' gesetzt. 3) Auch wenn weniger als 'n' Elemente vorhanden sind, hat das Dropdown-Feld immer noch die Größe von 'n' Elementen.

Chi Row
quelle
Guter Versuch, aber kein Glück, auch versucht, es durch onFocus zu ersetzen.
Ismail Iqbal
0

Die Chi Row Antwort ist eine gute Option für das Problem, aber ich habe einen Fehler in den onclickArgumenten gefunden. Stattdessen wäre:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(Und erwähnen Sie, dass Sie das " n " durch die Anzahl der benötigten Zeilen ersetzen müssen)

Katalanischer Programmierer
quelle
-2

Sie können die Höhe von eins ändern. Nicht verwenden height="500"(nur eine Beispielnummer). Verwenden Sie den Stil. Sie können ein <style>Tag verwenden oder einfach Folgendes verwenden:

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

Ich stelle die Veränderung ins Rampenlicht:

  <select id="option" style="height: 100px;">

Und noch besser ...

style="height: 100px;">

Siehst du das?

Bitte stimmen Sie ab, wenn es hilfreich ist!

Gefährliches Spiel
quelle
Die Frage zum Stylen der Höhe des Objekts, das geöffnet wird, wenn Sie auf ein <select>Element klicken , nicht auf das Element selbst. Ich habe diese Frage vor über 10 Jahren gestellt, als das Stylen dieses Widgets praktisch unmöglich war. Ich bin sicher, dass dies nicht mehr der Fall ist.
Mkoryak