Высота окна выбора HTML (выпадающее меню)

Ответ 1

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

Отбрасываемая часть имеет значение:

• Высота, необходимая для отображения всех записей, или
• Высота, необходимая для отображения записей 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
• В IE/Edge, если нет параметров, тупо высокий список из 11 записей пробелов.

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Ответ 6

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

Однако, если вы хотите эту функциональность, тогда есть много вариантов. Вы можете использовать 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
  <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>