it-swarm.com.ru

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

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

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

80
mkoryak

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

Часть, которая выпадает вниз, устанавливается либо:

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

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

88
scunliffe

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

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

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

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

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

5
mkoryak

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

Однако если вы хотите эту функциональность, то есть много вариантов. Вы можете использовать загрузчик 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>

2
Raman Sahasi

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

2
Aniqa Arif

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

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

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

0
CatalanProgrammer

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

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

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

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

0
Chi Row