Change the Size of a Bootstrap Drop Down Menu

Question

I have a simple html select box with a lots of options (round about 100). Because the select box has so much options, it uses the complete desktop height for showing the options, but I want to add a scrollbar and only show 5 options at the same time.

the size attribute doesent work for me.

This is my code:

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<Select id="selectUser" onchange="" class="btn btn-default dropdown-toggle" style="margin-top: -3px; background-color: white; height: 30px;" >
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>

check this - https://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dropdown — martinho, Aug 22 '18 at 11:38
Thank you for the link but it doesent helped me. i think the problem is because the dropdown-toggle class.. — frTsf3f, Aug 22 '18 at 11:43
you can always customize a dropdown with CSS. see some examples here - https://codepen.io/search/pens?q=dropdowns&page=1&order=popularity&depth=everything&show_forks=false — martinho, Aug 22 '18 at 12:02

לבני מלכה · Answer 1 · 2018-08-22T11:51:30.573

As I know you can not change the height of select because it browser definition

See here why option can not be changed:https://css-tricks.com/dropdown-default-styling/

See here sizes of option in browsers:Height of an HTML select box (dropdown)

However you can set size to select

select{
margin-top: -3px;
background-color: white;
height: 30px;
}

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div class="row">
<div class="col-xs-2">
<select class="form-control" id="selectUser" onmousedown="if(this.options.length>5){this.size=5;}"  onchange='this.size=0;' onblur="this.size=0;">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</div>
</div>

i just want to be able to use the size html attribute. this would be enough. — frTsf3f, Aug 22 '18 at 11:45
This works, but the style is very ugly. the drop down menu should be beautiful, if u know what i mean. this is why i use bootstrap. But thanks for your help. — frTsf3f, Aug 22 '18 at 11:48
This works for me! thank your for your help and have a nice day! — frTsf3f, Aug 22 '18 at 12:00
really appricate if you mark as answer :) have a nice day too :) — לבני מלכה, Aug 22 '18 at 12:00

score 0 · Answer 2 · answered Aug 22 '18 at 12:49

0

You can try this...

#selectUser { height: 100px; overflow: scroll; }

answered Aug 22 '18 at 12:49

Michiel J Otto

2,121
17
13

Change the Size of a Bootstrap Drop Down Menu

2 Answers2