Höhe eines HTML-Auswahlfelds (Dropdown)

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.

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

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

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>

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

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.

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)

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!