Висота поля вибору HTML (спадне меню)

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

Атрибут розміру select робить його схожим на список, атрибут height у CSS теж не приносить багато користі.

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

Частина, яка випадає, встановлюється як:

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

Я працював над випадаючим замінником плагіна jquery для боротьби з цією проблемою. Станом на цей пост, його майже не можна відрізнити від рідного випадаючого списку за зовнішнім виглядом та функціональністю .

ось демонстраційний файл (також посилання на завантаження): http://programmingdrunk.com/current-projects/dropdownReplacement/

ось сторінка проекту плагіна:

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

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

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>

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

Це не ідеальне рішення, але воно начебто працює.

У тег вибору включіть такі атрибути, де 'n' - кількість рядків, що випадають, які будуть видимими.

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

З цим рішенням є три проблеми. 1) Швидко спалахують всі елементи, що відображаються під час першого клацання миші. 2) Позиція встановлена ​​як "абсолютна". 3) Навіть якщо елементів менше, ніж "n", випадаюче вікно все одно буде відповідати розміру "n" елементів.

Відповідь Chi Row є хорошим варіантом вирішення проблеми, але я знайшов помилку та onclickаргументи. Натомість було б:

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

(І згадайте, що ви повинні замінити " n " на потрібну кількість рядків)

Ви можете змінити висоту одного. Не використовувати height="500"(Тільки приклад номера). Використовуйте стиль. Ви можете використовувати <style>тег або просто використовувати це:

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

Я звертаю увагу на зміни:

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

А ще краще ...

style="height: 100px;">

Ти бачиш це?

Будь ласка, проголосуйте, якщо це корисно!