webentwicklung-frage-antwort-db.com.de

Höhe einer HTML-Auswahlbox (Dropdown)

Kann jemand bestätigen, dass es not möglich ist, die Höhe einer Dropdown-Liste zu ändern, die angezeigt wird, wenn Sie auf ein Auswahlfeld klicken 

Das size-Attribut des select bewirkt, dass es wie eine Liste aussieht. Das height-Attribut im CSS macht auch nicht viel. 

80
mkoryak

Bestätigt.

Der herunterfallende Teil ist auf Folgendes festgelegt:

  1. Die erforderliche Höhe, um alle Einträge anzuzeigen, oder
  2. Die für die Anzeige von x-Einträgen benötigte Höhe (mit verbleibenden Bildlaufleisten), wobei x .__ ist.
    • 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 im IE/Edge keine Optionen vorhanden sind, eine dumme Liste von 11 Leerzeicheneinträgen.

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

88
scunliffe

ich habe an einem Dropdown-Ersatz-Jquery-Plugin gearbeitet, um dieses Problem zu bekämpfen. Zum jetzigen Zeitpunkt ist es in Bezug auf Aussehen und Funktionalität kaum 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 der neuen Website installieren, wenn es funktioniert. Verwenden Sie daher den Link zum Programmingdrunk.com für Demo/Download

5
mkoryak

NEIN. Es ist nicht möglich, die Höhe einer ausgewählten Dropdown-Liste zu ändern, da diese Eigenschaft browserspezifisch ist.

Wenn Sie jedoch diese Funktionalität wünschen, gibt es viele Optionen. Sie können bootstrap dropdown-menu verwenden und dessen max-height-Eigenschaft 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>

2
Raman Sahasi

Eigentlich kannst du irgendwie! Ärgern Sie sich nicht mit Javascript ... Ich habe mich für eine Website, die ich mache, nur auf dasselbe festgelegt. Wenn Sie das CSS-Attribut "font-size" für das Tag erhöhen, erhöht sich automatisch auch die Höhe. Kleinlich, aber es stört mich sehr viel

2
Aniqa Arif

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

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

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

0

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

Fügen Sie im select-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) Alle Elemente werden beim ersten Mausklick schnell angezeigt. 2) Die Position ist auf 'absolut' gesetzt. 3) Selbst wenn weniger als 'n' Elemente vorhanden sind, wird die Dropdown-Box immer noch die Größe von 'n' Elementen haben.

0
Chi Row