How to Set Height for the Drop Down of Select box
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
How to set max-height of dropdown selection area?
Specifying height:50px
is limiting the select to 50px. Use min-height
instead. Also wrap the select element in a div with fixed height so that it'll overlap on content below and not push it down.
.select-wrapper {
height: 50px;
overflow-y: visible;
}
.select {
width: 100%;
/* make it min-height*/
min-height: 50px;
border-radius: 25px;
border-color: #555;
padding: 10px;
}
<span>Select height is limited to 8 options.</span>
<div class="select-wrapper form-column form-column-field">
<select data-no-search="" data-placeholder="Выбрать год" onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" class="select select-no-search">
<option disabled="disabled">
<font style="vertical-align: inherit;">-Select Year</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1922</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1923</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1924</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1925</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1926</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1927</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1928</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1929</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1930</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1931</font>
</option>
<option value="1922">
<font style="vertical-align: inherit;">1932</font>
</option>
<option value="1923">
<font style="vertical-align: inherit;">1933</font>
</option>
</select>
</div>
<div class="footer__block" style="background-color:wheat;height:200px;border:2px dashed green">
<h3>Popular tags:</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.
</div>
Height of an HTML select box (dropdown)
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), wherex
is- 20 in Firefox & 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
CSS, overwrite height of all select dropdowns?
100% JS solution (with jquery)
$("select").height("120px");
100% JS solution (without jquery)
var selects = document.getElementsByTagName("select");
for(i = 0;i < selects.length; i++) {
selects[i].style.height = "120px";
}
100% CSS solution
select {
height: 100px !important;
}
Related Topics
How to Add a Tool Tip to a Span Element
Make <Body> Fill Entire Screen
Uppercase or Lowercase Doctype
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
White Space Showing Up on Right Side of Page When Background Image Should Extend Full Length of Page
How to Truncate Table Cells, But Fit as Much as Content Possible
How to Vertically Center a <Span> Inside a Div
How to Keep Footer at Bottom of Screen
Bootstrap 3: Push/Pull Columns Only on Smaller Screen Sizes
CSS Grid - Maximum Number of Columns Without Media Queries
Is Using <Li> Without Enclosing <Ul> Tags Dangerous
How to Give a CSS Class Priority Over an Id
Make Link in Table Cell Fill the Entire Row Height
How to Flatten Nested Divs to Display Them in a CSS Grid
Equalize the Height of Left and Right Div, Prevent Right Div from Going Below Left Div