Make multiple-select to adjust its height to fit options without scroll bar

Question

Apparently this doesn t work      select multiple        height  100          it makes the select have 100  page height     auto doesn t work either  I still get the vertical scrollbar   Any other ideas

User · Answer

To remove the scrollbar add the following CSS:

select[multiple] {
    overflow-y: auto;
}

Here's a snippet:

_x000D_

select[multiple] {_x000D_
  overflow-y: auto;_x000D_
}

_x000D_

<select>_x000D_
  <option value="1">One</option>_x000D_
  <option value="2">Two</option>_x000D_
  <option value="3">Three</option>_x000D_
</select>_x000D_
_x000D_
<select multiple size="3">_x000D_
  <option value="1">One</option>_x000D_
  <option value="2">Two</option>_x000D_
  <option value="3">Three</option>_x000D_
</select>

_x000D_

User · Answer

To adjust the size  height  of all multiple selects to the number of options  use jQuery      select multiple   multiple    each function           this  attr  size     this  find  option   length

User · Answer

I guess you can use the size attribute  It works in all recent browsers    lt select name  quot courses quot  multiple  quot multiple quot  size  quot30 quot style  quot height  100   quot  gt

User · Answer

Here is a sample package usage  which is quite popular in Laravel community       Form  select  subdomains      subdomains  null         id    gt   subdomains        multiple    gt  true       size    gt   subdomains- gt count         class    gt   col-12 col-md-4 form-control     errors- gt has  subdomains      is-invalid                  Package  https   laravelcollective com

User · Answer

I had this requirement recently and used other posts from this question to create this script      select multiple    each function         this  css  height   100         attr  size  this length

User · Answer

You can count option tag first  and then set the count for size attribute  For example  in PHP you can count the array and then use a foreach loop for the array   lt  php  count   count  array     gt   lt select size  quot  lt  php echo  count    gt  quot  style  quot height 100   quot  gt   lt  php foreach   array as  item     gt       lt option value  quot valueItem quot  gt Name Item lt  option gt   lt  php     gt   lt  select gt

User · Answer

I know the question is old  but how the topic is not closed I ll give my help   The attribute  size  will resolve your problem    Example    lt select name  courses  multiple  multiple  size  30  gt

User · Answer

Old  but this will do what you re after without need for jquery  The hidden overflow gets rid of the scrollbar  and the javascript makes it the right size    lt select multiple  multiple  id  select  style  overflow hidden  gt   lt option value  foo  gt foo lt  option gt   lt option value  bar  gt bar lt  option gt   lt option value  abc  gt abc lt  option gt   lt option value  def  gt def lt  option gt   lt option value  xyz  gt xyz lt  option gt   lt  select gt    And just a tiny amount of javascript  var select   document getElementById  select    select size   select length

User · Answer

The way a select box is rendered is determined by the browser itself  So every browser will show you the height of the option list box in another height  You can t influence that  The only way you can change that is to make an own select from the scratch

User · Answer

friends   if you retrieve de data from a DB   you can call this   registers      num rows  Result query   then   lt select size  lt    registers   1    gt   gt

User · Answer

select could contain optgroup which takes one line each    lt select id  list  gt     lt optgroup label  Group 1  gt       lt option value  1  gt 1 lt  option gt     lt  optgroup gt     lt optgroup label  Group 2  gt       lt option value  2  gt 2 lt  option gt       lt option value  3  gt 3 lt  option gt     lt  optgroup gt   lt  select gt   lt script gt    const l   document getElementById  list     l setAttribute  size   l childElementCount   l length   lt  script gt    In this example total size is  1 1   1 2  5

User · Answer

You can do this with simple javascript      lt select multiple  multiple  size  return this length     gt       or limit height until number-of-records      lt select multiple  multiple  size  return this length    gt  10   this length    10   gt

User · Answer

Using the size attribute is the most practical solution  however there are quirks when it is applied to select elements with only two or three options     Setting the size attribute value to  0  or  1  will mostly render a default select element  dropdown   Setting the size attribute to a value greater than  1  will mostly render a selection list with a height capable of displaying at least four items  This also applies to lists with only two or three items  leading to unintended white-space    Simple JavaScript can be used to set the size attribute to the correct value automatically  e g  see this fiddle      function             autoheight   attr  size   parseInt     autoheight option   length           As mentioned above  this solution does not solve the issue when there are only two or three options

User · Answer

For jQuery you can try this  I always do the following and it works     function             multiSelect   attr  size      multiSelect option   length

User · Answer

You can do this using the size attribute in the select tag  Supposing you have 8 options  then you would do it like    lt select name  courses  multiple  multiple  size  8  gt

User · Answer

You can only do this in Javascript JQuery  you can do it with the following JQuery  assuming you ve gave your select an id of multiselect      function              multiSelect   css  height   parseInt     multiSelect option   length    20         Demo   http   jsfiddle net AZEFU

[html] Make multiple-select to adjust its height to fit options without scroll bar

Examples related to html

Examples related to css

Examples related to html-select