How to get a drop-down list to add a scroll bar?

HTML & CSS
1

I’m trying to add a scroll bar to a drop-down list.

Here is the Form code:

        <form method="get" action="../search.php" />
        <table class="table10">
	    <tr>
		<td>
		<input type="text" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" />
	  	</td>
		<td>
	  	<select size="1" name="channel" class="dropdown1"/>
		<option value="">SELECT</option>
		<option value="All">All Videos</option>
		<option value="1">Channel1</option>
		<option value="4">Channel2</option>
	  	</select>
	  	</td>
	  	<td>
	  	<select size="1" name="sub_category" class="dropdown1"/>
		<option value="All">Sub Category</option>
	  	</select>
		</td>
		<td>
		<input type="submit" value="SUBMIT"/>
		</td>
		</tr>
		</form>

And here is the css:

.dropdown1 {
width:290px;
overflow:scroll;
height: 20px;
}

and I have also tried:

.dropdown1 {
width:290px;
overflow-y: scroll;
height: 20px;
}

Any additional help will be appreciated.

2

I’ve only seen a dropdown form element with a scroll bar if it allowed you to select multiple items. Do you have a particular reason for wanting this scroll bar in the select box?

3

If you are referring to the <select> element in your code above.

The answer was given in your other thread of the same topic.
Any simple way to add a scrolling action to a drop-down list?

Straight from MDN Styling HTML forms -

The ugly

Some elements simply can’t be styled using CSS. These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including <select>, <option>, <optgroup> and <datalist> elements. The file picker widget is also known not to be stylable at all. The new <progress> and <meter> elements also fall in this category.

The browser determines when to initiate a scrollbar depending on the amount of options and the direction the dropdown takes with given viewport space.

4

Thanks for your reply. Much appreciated.
So, you’re saying basically the browser decides when a scroll bar goes in, and what it will look like? (if you add some scroll code)?

I selected your link, from my other posting:

and copied what the last guy laid out there, to test.

I don’t see any scroll code. Can you suggest what scroll code might go with that code show on that page?

5

This first part is correct, the browser has full control of the scrollbar.
There are no scroll rules that you can style in.

The hacky way I mentioned in your other thread, wraps a div around the select element and hides the default dropdown button by layering over it with a bg image.

It only alters the dropdown button and does nothing in regards to the scrollbar.

6

Some older browsers don’t even generate the select themselves and simply allow the operating system to do it for them.

1 Like
7

Much thanks for the replies

8

Even after all these great words of wisdom, I’d like to try this, that I came across, in regard to adding a scroll bar to a long list, I’d like to see how it looks:

<script>
$(function(){

    $(".dropdown > li").hover(function() {

         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller

        // need to save height here so it can revert on mouseout
        $container.data("origHeight", $container.height());

        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");

        // make sure dropdown appears directly below parent list item
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });

        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }

    }, function() {

        var $el = $(this);

        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");

    });

    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });

});
</script>

But, I don’t know how to integrate it with my successfully working Form code:


<script type="text/javascript">
		$(document).ready(function() {
		$("select[name='channel']").change(function() {
		var channel_id = $(this).val();

		console.log(channel_id);

		$.ajax({
		    type: "GET",
		    url: "/ajax.php",
		    data: "channel_id="+channel_id,
		    success: function(data) {
		    data = JSON.parse(data);
		    $("select[name='sub_category']").html('<option value="All">Optional</option>');
		    for(i = 0; i < data.length; i ++) {
		    $("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
		    }
		    }
		    });
		});
		});
		</script>

Any help will be appreciated.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.