How to Set Height for the Drop Down of Select box

Question

my selectbox is showing scroll when number of options are more than 20 i just want to show scrol in when options are more than 10

 <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
  </select>

http://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown — Dorvalla, May 08 '14 at 06:39
Possible duplicate of [Height of an HTML select box (dropdown)](https://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown) — David Glass, Jun 13 '18 at 16:11

score 38 · Accepted Answer · edited Mar 06 '20 at 06:04

38

Try adding this to the <select> element:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();

like:

   <select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

SAMPLE DEMO

edited Mar 06 '20 at 06:04

John

11,516
11
87
151

answered May 08 '14 at 06:41

reuelab

1,946
1
17
28

1

@VinceCgto your way shows all the 10 options all at once.. the OP wants to show only one then show 10 on focus. – reuelab May 08 '14 at 06:51
if i am select same value again..on change event not work so select size attribute no re sized. how to re size =1 when select a same value?. – Palaniraja May 31 '18 at 09:21
This works really well. Had to add `style='height:auto'` to `select` to make the select box expand for some cases. – Soujirou May 31 '19 at 00:25

score 16 · Answer 2 · edited Mar 06 '20 at 06:04

16

Seriously guys, there is a size attribute for the select element:

<select size="10">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

FIDDLE: http://jsfiddle.net/UR46N/

edited Mar 06 '20 at 06:04

John

11,516
11
87
151

answered May 08 '14 at 06:46

Vince C

798
5
15

This is how I interpreted it (and still do after re-reading your question). Oh well, glad you solved your problem. – Vince C May 08 '14 at 07:02

Seemu Saikia · Answer 3 · 2020-05-27T12:52:47.550

In Case of setting size (height/width) and fitting the selection list in the pop up then try the following in VFPage- Salesforce:

<apex:selectList onclick="this.size=5;" required="true" id="form-element-05" value="{!scheduleBatchWrapper.hour}" size="1" styleClass="slds-select selectObj  slds-m-left_medium slds-m-top_medium schTime" style="max-width:50%; margin-bottom:5% margin-top:5%,max-height:20%" >
                                                                            <apex:selectOptions value="{!scheduleBatchWrapper.hoursList}"></apex:selectOptions>
                                                                        </apex:selectList>

// here onclick="this.size=5;" will set the size to 5 when you click on the selectList. //it works fine for Chrome,Firefox,Edge.

Thanks

score 1 · Answer 4 · answered Apr 27 '21 at 11:13

As much as I see, none of the former answers explain the Options box. As much as I know, we don't have accessibility to manipulate options in a select box. We just can change the colors and background color at the same time, add a new font and that's all we could do. If we add padding or margin to the Options, the drop-down list will be still the same as its initial condition.

The only way to do so is to design a select-box on your own( by using radio buttons, prevent their default style, and add a background color to it. )

score 0 · Answer 5 · answered May 08 '14 at 06:40

0

check this .i have implemented scroll to your select box. http://plnkr.co/edit/XiKZ4X2DGYTJDjJX2xvw?p=preview

answered May 08 '14 at 06:40

Pranav

656
3
7

score -1 · Answer 6 · answered Feb 01 '20 at 07:42

-1

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

option {
    padding: 5px 0;
}

answered Feb 01 '20 at 07:42

Senthil Kumar

65
2

1

Can you please add some explanation ? – Kishan Bharda Feb 01 '20 at 08:20

score -1 · Answer 7 · answered Oct 27 '21 at 09:46

-1

I am using Bootstrap and this answer helped me.

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

answered Oct 27 '21 at 09:46

Anupam

13,804
17
61
90

Thanks for the downvote. Would really appreciate any comment with a downvote so I could realise what was wrong – Anupam Nov 05 '21 at 09:16

score -2 · Answer 8 · answered May 08 '14 at 06:40

-2

Why dont you add CSS style to specify the width and height of the select. Check the article--> http://cssdeck.com/labs/styling-select-box-with-css3

answered May 08 '14 at 06:40

Aradhna

973
10
20

score -2 · Answer 9 · answered May 08 '14 at 06:41

-2

use below css

select{ padding:5px;}

answered May 08 '14 at 06:41

Amit

1,731
17
34

How to Set Height for the Drop Down of Select box

9 Answers9

Linked

Related