CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stack
stack

Reputation: 10228

Can I control how many options makes a select tag become scrollable?

Please take a look at this two <select> tags:

<select>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
</select>

<select>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  
</select>

As you see, the first one isn't scrollable, but the second one is. So it means, if I write lots of <option> attributes in a <select> tag, it will become scrollable automatically.

I'm trying to reduce that number which causes it be scrollable. For example, I want to make a <select> tag only has 7 <option> but is displayed with a scrollbar. Is it possible? Can I configure this with JavaScript?

I have tested adding a <div> surrounding the <select> tag as a wrapper and limiting its height, but nothing happened.

Upvotes: 3

Views: 823

Answers (3)

Polynomial Proton
Polynomial Proton

Reputation: 5135

.holder{
  position:relative;
  height:20px;
}

select{
 
position:absolute;
z-index: 1;
}
<div class="holder">
  <select onfocus='this.size=5;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
  <option>one</option>
</select>
  </div>


<h1>Random text</h1>

Not a straight forward way, but you can set the size onfocus and once selected and lost focus, set the size to 1 again.

Check out the code I added, you just need to update onfocus='this.size=5;' and set the size you need.

Update:

Rory made a good point in the comments which I didnt think of earlier.

This would affect the flow of the document as the increased height of the select would force following elements to adapt to its new dimensions

A work around for that would be to make the select lists' position absolute and add a z-index so it overlays elements below it. Check the updated code snippet

Upvotes: 2

DHRUV GUPTA
DHRUV GUPTA

Reputation: 2091

use onfocus attribute on select

onfocus='this.size=;'

to adjust the height of select. example

onfocus='this.size=10;'

here 10 indicates the no of options, like if this.size=10 so scroll will be automatically added if more then 10 options are there in select.

Upvotes: 1

Mik
Mik

Reputation: 111

Not exact solution but something similar would be attribute size="5"

<select size="5">
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>
  <option>two</option>

</select>

Upvotes: 0

Related Questions