Wysokość pola wyboru HTML (lista rozwijana)

Czy ktoś może potwierdzić, że nie można zmienić wysokości listy rozwijanej wyświetlanej po kliknięciu pola wyboru.

Atrybut rozmiaru elementu select sprawia, że ​​wygląda jak lista, atrybut wysokości w CSS też nie robi wiele dobrego.

Potwierdzony.

Część, która spada, jest ustawiona na:

1. Wysokość potrzebna do wyświetlenia wszystkich wpisów lub
2. Wysokość potrzebna do pokazania xwpisów (z paskami przewijania, aby zobaczyć pozostałe), gdzie xjest
   • 20 w przeglądarce Firefox i Chrome
   • 30 w IE 6, 7, 8
   • 16 dla Opery 10
   • 14 dla Opery 11
   • 22 dla przeglądarki Safari 4
   • 18 dla przeglądarki Safari 5
   • 11 w IE 5.0, 5.5
3. W IE / Edge, jeśli nie ma opcji, głupio wysoka lista 11 pustych wpisów.

Dla (3) powyżej możesz zobaczyć wyniki w tym JSFiddle

Pracowałem nad wtyczką jquery zastępującą listę rozwijaną, aby zwalczyć ten problem. W tym poście jest prawie nie do odróżnienia od natywnego menu pod względem wyglądu i funkcjonalności .

tutaj jest demo (również link do pobrania): http://programmingdrunk.com/current-projects/dropdownReplacement/

oto strona projektu wtyczki:

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

(aktualizacja :) strona wtyczki jquery wydaje się nie działać. Prawdopodobnie nie umieszczę mojej wtyczki na ich nowej stronie, gdy zaczną działać, więc możesz skorzystać z linkumingdrunk.com do demonstracji / pobrania

NIE . Nie można zmienić wysokości menu wyboru, ponieważ ta usługa jest zależna od przeglądarki.

Jeśli jednak chcesz mieć tę funkcjonalność, istnieje wiele opcji. Możesz użyć bootstrap dropdown-menui zdefiniować jego max-heightwłaściwość. Coś takiego.

$('.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>

Właściwie możesz! Nie kłopocz się z javascriptem ... Po prostu utknąłem w tym samym miejscu na stronie, którą tworzę i jeśli zwiększysz atrybut 'font-size' w CSS dla tagu, automatycznie zwiększy się również wysokość. Drobna, ale to coś, co mnie bardzo niepokoi ha ha

To nie jest idealne rozwiązanie, ale działa.

W tagu zaznaczania uwzględnij następujące atrybuty, gdzie „n” to liczba wierszy menu, które byłyby widoczne.

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

Z tym rozwiązaniem wiążą się trzy problemy. 1) Istnieje szybki błysk wszystkich elementów wyświetlanych podczas pierwszego kliknięcia myszą. 2) Pozycja jest ustawiona na „bezwzględną”. 3) Nawet jeśli jest mniej niż „n” elementów, rozwijane pole nadal będzie miało rozmiar „n” elementów.

Odpowiedź Chi Row jest dobrym rozwiązaniem problemu, ale znalazłem błąd w onclickargumentach. Zamiast tego byłoby:

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

(I wspomnij, że musisz zastąpić „ n ” liczbą potrzebnych wierszy)

Możesz zmienić wysokość jednego. Nie używaj height="500"(tylko przykładowa liczba). Użyj stylu. Możesz użyć <style>tagu lub po prostu użyć tego:

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

Zwracam uwagę na zmianę:

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

A nawet lepiej ...

style="height: 100px;">

Widzisz to?

Proszę o głosowanie, jeśli jest to pomocne!