发表新帖
发表新帖

Height of an HTML select box (dropdown)

前端 未结
关注
7 610
天涯浪人
天涯浪人 2020-11-22 08:48

Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box.

The size attribute of th

相关标签:
7条回答
  • 挽巷
    2020-11-22 09:12

    Confirmed.

    The part that drops down is set to either:

    1. The height needed to show all entries, or
    2. The height needed to show x entries (with scrollbars to see remaining), where x is
      • 20 in Firefox & Chrome
      • 30 in IE 6, 7, 8
      • 16 for Opera 10
      • 14 for Opera 11
      • 22 for Safari 4
      • 18 for Safari 5
      • 11 in IE 5.0, 5.5
    3. In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.

    For (3) above you can see the results in this JSFiddle

    0 讨论(0)
  • 离开以前
    2020-11-22 09:12

    NO. It's not possible to change height of a select dropdown because that property is browser specific.

    However if you want that functionality, then there are many options. You can use bootstrap dropdown-menu and define it's max-height property. Something like this.

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

    0 讨论(0)
  • 悲哀的现实
    2020-11-22 09:17

    This is not a perfect solution but it sort of does work.

    In the select tag, include the following attributes where 'n' is the number of dropdown rows that would be visible.

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

    There are three problems with this solution. 1) There is a quick flash of all the elements shown during the first mouse click. 2) The position is set to 'absolute' 3) Even if there are less than 'n' items the dropdown box will still be for the size of 'n' items.

    0 讨论(0)
  • 独厮守ぢ
    2020-11-22 09:22

    You can change the height of one. Don't use height="500"(Just an example number). Use the style. You can use <style>tag or just use this:

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

    I spotlight the change:

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

    And even better...

    style="height: 100px;">

    You see that?

    Please up vote if it's helpful!

    0 讨论(0)
  • 孤城傲影
    2020-11-22 09:24

    i have been working on a dropdown replacement jquery plugin to combat this problem. As of this post, it is almost indistinguishable from a native dropdown in terms of look and functionality.

    here is a demo (also a link to downloads): http://programmingdrunk.com/current-projects/dropdownReplacement/

    here is the project page of the plugin:

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

    (update:) the jquery plugin page seems to no longer work. I will probably not put my plugin on their new site when they get it working, so feel free to use the programmingdrunk.com link for demo/download

    0 讨论(0)
  • 一整个雨季
    2020-11-22 09:27

    The Chi Row answer is a good option for the problem, but I've found an error i the onclick arguments. Instead, would be:

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

    (And mention you must replace the "n" with the number of lines you need)

    0 讨论(0)
 看不清?
提交回复
热议问题