Height of an HTML select box dropdown

Question

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 the select makes it look like a list  the height attribute in the CSS doesnt do much good either

User · Answer

The Chi Row answer is a good option for the problem  but I ve found an error i the onclick arguments  Instead  would be    lt select size  1  position  absolute  onclick  size  size  1  1 n       gt     And mention you must replace the  n  with the number of lines you need

User · Answer

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    x000D   x000D      dropdown-menu   on   click    a   function     x000D      var text     this  html    x000D      var htmlText   text      lt span class  caret  gt  lt  span gt    x000D        this  closest   dropdown   find   dropdown-toggle   html htmlText   x000D      x000D   dropdown-menu   x000D      max-height  146px  x000D      overflow  scroll  x000D      overflow-x  hidden  x000D      margin-top  0px  x000D    x000D   x000D   caret   x000D     float  right  x000D      margin-top  5   x000D    x000D   x000D   menu1   x000D      width  160px   x000D      text-align  left  x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D      x000D   lt div class  container  style  margin 10px  gt  x000D     lt div class  dropdown  gt  x000D       lt button class  btn btn-default dropdown-toggle  type  button  id  menu1  data-toggle  dropdown  gt Tutorials x000D       lt span class  caret  gt  lt  span gt  lt  button gt  x000D       lt ul class  dropdown-menu  role  menu  aria-labelledby  menu1  gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt About Us lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt About Us lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt About Us lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt About Us lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt About Us lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt About Us lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can change the height of one  Don t use height  500  Just an example number   Use the style  You can use  lt style gt tag or just use this    lt  DOCTYPE html gt   lt html gt   lt body gt     lt select id  option  style  height  100px   gt       lt option value  1  gt Option 1      lt option value  2  gt Option 2    lt  select gt   lt  body gt   lt  html gt    I spotlight the change      lt select id  option  style  height  100px   gt    And even better     style  height  100px   gt    You see that   Please up vote if it s helpful

User · Answer

Actually you kind of can  Don t hassle with javascript    I was just stuck on the same thing for a website I m making and if you increase the  font-size  attribute in CSS for the  tag then it automatically increases the height as well  Petty but it s something that bothers me a lot ha ha

User · Answer

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    lt select size  1  position  absolute  onclick  size  size  1  n 1       gt    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

User · Answer

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

User · Answer

Confirmed   The part that drops down is set to either    The height needed to show all entries  or The height needed to show x entries  with scrollbars to see remaining   where x is   20 in Firefox  amp  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 options  a stupidly high list of 11 blanks entries    For  3  above you can see the results in this JSFiddle

[html] Height of an HTML select box (dropdown)

Examples related to html

Examples related to html-select