HTML selection window height (dropdown menu)

Question

Can someone confirm that it is not possible to change the height of the drop-down list that appears when you click on the selection field.

The size attribute of the selection makes it look like a list; the height attribute in CSS is also not very useful.

Answer 1

Confirmed.

The discarded part matters:

• The height required to display all entries, or
• The height required to display the entries x (scroll to view the rest), where x
  • 20 in Firefox and 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
• In IE / Edge, if there are no parameters, a stupidly high list of 11 space entries.

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

Answer 2

I worked on a jquery dropdown plugin to deal with this problem. Starting from this post, it is almost indistinguishable from its own drop-down list in terms of appearance and functionality .

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

here is the plugin project page:

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

(update :) the jquery plugin page does not seem to work anymore. I probably won’t post my plugin on my new website when it works, so feel free to use the programdrunk.com link to demonstrate / download

Answer 3

In fact, you kind of can! Don’t get hung up on javascript ... I just got stuck on the same site for the website I am creating, and if you increase the "font-size" attribute in CSS for the tag, it automatically increases the height as well. Small but that’s what bothers me a lot ha ha

Answer 4

This is not an ideal solution, but it seems to work.

In the select tag, specify the following attributes, where 'n' is the number of lines of the drop-down list that will be visible.

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

There are three problems with this solution. 1) Fast flash of all items displayed during the first mouse click. 2) The position is set to “absolute”. 3) Even if the number of elements "n" is less than in "n", the drop-down field will still have the size "n".

Answer 5

Chi Row's answer is a good option for this problem, but I found a mistake in the onclick arguments. Instead of this:

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

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

Answer 6

NO . It is not possible to change the height of the drop-down list because this property is browser dependent.

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

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