Scrollbar at dropdown list

Hello,

Currently I was trying the jquery,css dropdown which is from here.

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

I added so many list. But scrollbar doesn't come out and list is too long. Here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Reinventing drop down with CSS and jQuery - demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}

        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative; }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
        .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:150px;}
        .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}

        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .flagvisibility { display:none;}


    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".dropdown img.flag").addClass("flagvisibility");

            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });

            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });


            $("#flagSwitcher").click(function() {
                $(".dropdown img.flag").toggleClass("flagvisibility");
            });
        });
    </script>
</head>
<body>
    <h1>JankoAtWarpSpeed demos</h1>
    <h3>Demo for tutorial: <a href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx"&gt;Reinventing drop down with CSS and jQuery</a></h3>
    <p class="desc">The control down here is a dropdown made with CSS and jQuery. <strong>Optionally, you can <a href="#" id="flagSwitcher">toggle flags</a> and see the full power of this reinvented element.</strong></p>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
                <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
                <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>
                <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li>
                <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li>
                <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li>
                <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li>
                                <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
                <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
                <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>
                <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li>
                <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li>
                <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li>
                <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li>
                                <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
                <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
                <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>
                <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li>
                <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li>
                <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li>
                <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li>
                                <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
                <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
                <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>
                <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li>
                <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li>
                <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li>
                <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li>
            </ul>
        </dd>
    </dl>
    <span id="result"></span>
</body>
</html>

Please kindly help me to get the scrollbar. Thanks.

I pasted the entire style. The only things that need to be changed are for the ".dropdown dd ul" class selector. It needs to have the following 2 properties added:

height: 100px; /* change to suit your needs */
overflow: auto;

Just add them at the end like I have pasted below.

<style type="text/css"> 
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}

        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative; }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
        .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:150px;}
        .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none; height:100px; overflow: auto;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}

        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .flagvisibility { display:none;}


    </style>

ansaurus

tags:

views:

answers:

Scrollbar at dropdown list

related questions