Height of an HTML select box (dropdown)
Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box. The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.
8 Answers 8
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), where x 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
If you set size=»1″ or nothing since it is the default then your select will be a drop down vs a static vertical in Page list. However as noted the actual dropdown height is determined by the browser and as developers we have no control over the list height.
NO. It’s not possible to change height of a select dropdown because that property is browser specific.
However if you want that functionality, then there are many options. You can use bootstrap dropdown-menu and define it’s max-height property. Something like this.
$('.dropdown-menu').on( 'click', 'a', function() '; $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText); >);i have been working on a dropdown replacement jquery plugin to combat this problem. As of this post, it is almost indistinguishable from a native dropdown in terms of look and functionality.
here is the project page of the plugin:
(update:) the jquery plugin page seems to no longer work. I will probably not put my plugin on their new site when they get it working, so feel free to use the programmingdrunk.com link for demo/download
interesting idea — I certainly like the ability to «skin» the fake select list (I find many default from the «native» OS theme and thus look «odd»), and the ability to control the content in the list I find handy (since IE provides very little styling options for option elements)
yep, but the demo page is a better resource than the plugin site. it also has a download on it. ill update the answer though, thanks
This looks awesome 😀 I wonder if you have time to test it with some later version of jquery. Thank you
I know that it’s not the best practice for changing the height of the select , but there is a code that maybe helps you to change the height.
Using the size attribute of the select tag:
Actually you kind of can! Don’t hassle with javascript. I was just stuck on the same thing for a website I’m making and if you increase the ‘font-size’ attribute in CSS for the tag then it automatically increases the height as well. Petty but it’s something that bothers me a lot ha ha
I would assume the goal would be to show more choices in the dropdown box, not to simply take up more space, which is what this answer would do.
This is not a perfect solution but it sort of does work.
In the select tag, include the following attributes where ‘n’ is the number of dropdown rows that would be visible.
There are three problems with this solution. 1) There is a quick flash of all the elements shown during the first mouse click. 2) The position is set to ‘absolute’ 3) Even if there are less than ‘n’ items the dropdown box will still be for the size of ‘n’ items.
The Chi Row answer is a good option for the problem, but I’ve found an error i the onclick arguments. Instead, would be:
(And mention you must replace the «n» with the number of lines you need)
My approach is different: I calculate and set the size of the select to match the available space.
- I start with a smaller select than the available space I determine the actual height of each option by increasing the size of the select and seeing how its offsetHeight changes; this value is browser dependent
- I calculate how many more options can fit
- I increase the size of the select to a value that will make it fit
// Make the select fit in the div` // The looks of a select are set by the browser, not by the client // Therefore, they change from browser to browser, and even with various revs of a given browser // This cannot be done at init, because the height of each option changes later // Instead, it must be done later, after the select has rendered if (!seriesSelect.fitted) < // If we haven't done it yet seriesSelect.fitted = true; // Flag it, so we don't do it again // Determine the actual height of each option in the select var maxHeight = seriesSelect.parentElement.parentElement.offsetHeight; var startHeight = seriesListBox.offsetHeight; seriesSelect.size = seriesSelect.size +1; var endHeight = seriesListBox.offsetHeight; var lineHeight = endHeight - startHeight; // Calculate how many more options can fit var extraHeight = maxHeight - endHeight; var extraItems = Math.floor(extraHeight / lineHeight); // Set the number of options to the max that will fit seriesSelect.size = seriesSelect.size + extraItems; >
Safari change select height
I can’t change select height , with all browser working fine, but Safari no, where can be problem? Also I try make class .style select , but not working.
10 Answers 10
-webkit-appearance: menulist-button; Doesn’t works with Safari on Windows machine, but Line-Height property is enough to style the height of Select tag
This does not work for me, 1/1/2020. I have to set -webkit-appearance: none; and use a css hack to add my own drop-down arrow icon
To style a select in Safari, you first have to turn off the os styling:
True, but this will hide the dropdown arrow. Therefore the best option is line-height (see answer above).
This does hide the drop-down arrow, but it does also successfully strip the offensive styling — clean palette. +1
This can be useful for those making a stylized select drop down by hiding the original select and having an overlay to look like the styled drop down.
which doesn’t affect other browsers, but fixes this bug in Safari
line-height seems to be ignored 9.1.3, however height: 25px is working. Unfortunately min-height is also not working.
@media screen and (-webkit-min-device-pixel-ratio:0) < select < -webkit-appearance: menulist-button !important; line-height:24px !important; >> This code ensures the same height across browsers.
The best way use modernizer detector and give safari class select menu a
or you can use jquery UI select menu to solve this by another cross-browser wy.
at least on iPad the select is not rendered for padding or line-height but instead will render given height and center vertically the value
select < -webkit-appearance:menu-item; // or menulist-button -moz-appearance:menu-item; height:2.4em; // this must be calculated to match other input types >input[type="text"], select
the only thing unresolved now is background which is predefined and imutable
Nothing worked for me until I used inline style:
Somehow Safari (latest Windows version, 5.1.7) doesn’t read this style property from CSS file.
@media screen and (-webkit-min-device-pixel-ratio:0) < select < -webkit-appearance: menulist-button !important; line-height:24px !important; >> Give line-height according your requirement.
This is how I am solving this in 2022:
@RCWhim — Yes, if you want to style it yourself, you will have to do the arrows also. Hence the appearance:none
This is how I am solving this in 2022:
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
How to Set Height for the Drop Down of Select box
@VinceCgto your way shows all the 10 options all at once.. the OP wants to show only one then show 10 on focus.
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?.
This works really well. Had to add style=’height:auto’ to select to make the select box expand for some cases.
Seriously guys, there is a size attribute for the select element:
This is how I interpreted it (and still do after re-reading your question). Oh well, glad you solved your problem.
In Case of setting size (height/width) and fitting the selection list in the pop up then try the following in VFPage- Salesforce:
// here onclick=»this.size=5;» will set the size to 5 when you click on the selectList. //it works fine for Chrome,Firefox,Edge.
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. )
check this .i have implemented scroll to your select box. http://plnkr.co/edit/XiKZ4X2DGYTJDjJX2xvw?p=preview
option
CSS, overwrite height of all select dropdowns?
how would i reference, so i could overwrite, all of the select boxes so i can overwrite the default height? I’m familiar when i create elements using a class, but im unsure on this?
7 Answers 7
100% JS solution (with jquery)
100% JS solution (without jquery)
var selects = document.getElementsByTagName("select"); for(i = 0;i You mean the menu that pops up when dropping down a native select element?
I don’t think you can influence that at all, that’s entirely up to the browser.
What you might be able to influence — it should work in all current browsers — is the select itself:
or each option (Should work in Firefox; spotty support otherwise)
Replace 60 with your desired height.
The best way is to give a class on your select element.
Then on your css set the height, for example .myclass this will give height 30px on all elements with class name myclass. I suggest you this way, because you may wish to create another select element with another height. So you just set other class on it and define it on your css.
You can easily do this using css use line-height and font-size.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.