I'm working on creating a new design for a website my company is building based on images from a designer. It's been going fairly well, but I couldn't seem to get the <select> boxes to match the image. I found a Javascript solution that seems to work fairly well, but I have one major problem with it: I can't set a maximum height and force it to scroll. We have a fairly long list of options, so with the current design it forces the user to scroll the entire page down to see the bottom.

The Javascript solution that I found hides the <select> box and replaces it with a <ul> populated with the <option>'s. When you click on an <li>, it updates the <select> box accordingly.

I've done some poking around in Firebug, and the one that seems the most obvious to me is setting the height on the <ul> it generates, but no luck there. It seems that even with the list open, it doesn't seem to contain the <li>'s.

We'd like to make this new design live as soon as possible, but this is a major usability problem. Any help would be very much appreciated.

Link to example page: http://truwindshield.com/test2/

1 answer

Mottie 1134


I ended up needing to wrap each select box in a div with "selection" as a class

<div class="selection"><select name="year" id="year_select"> ... </select></div>

then I added the following CSS:

.selection {
    position: relative;
    top: -18px;
    left: 0;

ul.selectOpen {
    height: 80px;
    overflow-y: scroll;
    z-index: 200;

In the ul.selectReplacement definition, remove position: relative and replace it with this:

ul.selectReplacement {
    position: absolute;
    top: -18px;
    left: 0;

The only problem is the scroll bar :(... I think a nice solution might be to use this jQuery UI Selectmenu

Answered over 6 years ago by Mottie