Just created my first dropdown combo
I’m probably missing something or have mis-understood, but wouldn’t you just select only the six items that you want to display from the data source?
Why not use HTML? <select multiple size="6"> Or was it a dropdown menu you were referring to?
@SamA74 @WebMachine Sorry guys I think you misunderstood. My combo gets populated with more rows than I would like to be visible. Here are two images - what I have now and what I am trying to achieve when the combo is selected.
Have you tried using the size attribute?
size
If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is 0.
That is the size of the list before opening the drop-down. So what you get is a scrolling box of that size from the start and no drop-down.
I don’t know of a way to target the drop-down with css, as it does not exist as an html element as such. Targeting the <select> with a height rule only alters the initial box, not the drop-down.
1 Like
Maybe some kind of :focus { height rule on the select?
The number shown will vary with browser and there is no way to limit it unless you use the scrolling list method mentioned above using the size attribute.
You could add some js that adds the size attribute dynamically and thus reveal only the required items but you would need to remove the whole thing from the flow or the page would jump.
Here’s a proof of concept.
However you would need to test thoroughly as there may be issues in some browsers and of course the js should be removed from inline and re-written as an external script.
Generally when you want fine control of select boxes you would look at a select replacement script so that all the styling can be done with normal css elements exactly as you want and the script will swap the values between the two.
2 Likes
@SamA74 - have tries the size atribute in html but this does not work. Have tried setting the size via javascript after load of data but again this does not work. The dropdown combo poulates but when user focuses on combo there is not size and there is no scrollbar… however mousewheel scroll works
@Mittineague tried :focus but it did not work.
Tried this https://stackoverflow.com/questions/23534440/how-to-set-height-for-the-drop-down-of-select-box#23534569 but whilst it worked in jsfiddle it was based in static content and not dynamically populated combo.
@PaulOB - thanks, a good share - I’ll look further into this. Your example works fine on static content. Unfortunately once I populate with jQuery and then try and set the size attribute, nothing seems to work
Can’t think that it would make a difference as long as the size attribute is added after the select was populated.
You may need to set up a codepen or similar so we can see the problem in action if you can’t solve it.
@PaulOB Appreciate your support. My jQuery is as follows:
$(data).find("h").each(function(){
var label = $(this).find("hNm").text();
var hid = $(this).find("hID").text();
$('#cmb1').append($("<option></option>")
.attr("value",hid)
.text(label))
});
When I add .attr("size", 6)
the dropdown does not drop down on focus...
Without this line the dropdown works but is obviously longer, visibily, than I want it to be.That’s what I had suggested above.
1 Like
I see none of the code @PaulOB suggested in your code. His code does more than just set size to 6. There is some very specific CSS styling at play, along with dynamically setting size to 6 when needed, and setting it back to 0 when no longer required.
Please open his pen and check out how it works.
4 Likes
Do you have a working example we can look at? Or a reduced test codepen with html, css and js present?
Doh, CSS issue - height: 1.8em removed line and all is good - apologies
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.