Высота поля выбора HTML (выпадающий)

Question

Может ли кто-нибудь подтвердить, что не можно изменить высоту раскрывающегося списка, который отображается при нажатии на поле выбора.

Атрибут size объекта select делает его похожим на список, а атрибут height в CSS тоже не очень полезен.

Answer 1

Подтверждено.

Для выпадающей части установлено значение:

1. Высота, необходимая для отображения всех записей, или
2. Высота, необходимая для отображения x записей (с полосами прокрутки, чтобы увидеть оставшиеся), где x
   • 20 в Firefox & Chrome
   • 30 в IE 6, 7, 8
   • 16 для Opera 10
   • 14 для Opera 11
   • 22 для Safari 4
   • 18 для Safari 5
   • 11 в IE 5.0, 5.5
3. В IE / Edge, если нет опций, тупо большой список из 11 пустых записей.

Для (3) выше вы можете увидеть результаты в этом JSFiddle

Answer 2

Я работаю над выпадающим сменным плагином jquery для решения этой проблемы. По состоянию на этот пост, он почти неотличим от собственного выпадающего списка с точки зрения внешнего вида и функциональности .

Вот демоверсия (также ссылка на скачивание): http://programmingdrunk.com/current-projects/dropdownReplacement/

вот страница проекта плагина:

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

(обновление :) страница плагина jquery, похоже, больше не работает. Вероятно, я не буду размещать свой плагин на их новом сайте, когда он заработает, так что не стесняйтесь использовать ссылку для программирования

Answer 3

NO . Невозможно изменить высоту раскрывающегося списка, поскольку это свойство зависит от браузера.

Однако, если вы хотите эту функциональность, есть много вариантов. Вы можете использовать bootstrap dropdown-menu и определить его max-height свойство. Как то так.

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

Answer 4

На самом деле вы вроде как можете! Не стесняйтесь с javascript ... Я просто застрял на том же самом для веб-сайта, который я делаю, и если вы увеличите атрибут «font-size» в CSS для тега, то он автоматически также увеличит высоту. Мелкая, но это то, что беспокоит меня, ха-ха

Answer 5

Ответ Chi Row - хороший вариант решения проблемы, но я обнаружил ошибку в аргументах onclick. Вместо этого будет:

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

(и отметьте, что вы должны заменить " n " на нужное вам количество строк)

Answer 6

Это не идеальное решение, но оно вроде работает.

В теге select включите следующие атрибуты, где 'n' - количество раскрывающихся строк, которые будут видны.

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

Есть три проблемы с этим решением. 1) Быстрая вспышка всех элементов, отображаемых во время первого щелчка мышью. 2) Положение установлено на «абсолютное» 3) Даже если количество элементов меньше n, раскрывающийся список будет по-прежнему иметь размер «n».