Need Slim Scroll on Ul of an Bootstrap DropDownList

Question

I want to customize the bootstrap drop down. My DropDown having lots of records. I want to add slim scroll on ul part of the bootstrap dropdown.

Please see following link -

_http://jsfiddle.net/saurabh29/pgrdm7jt/2/

Please help....

Thanks in advance.

Answer 1

Here is bootstrap dropdown customized scroll bar in option. See this fiddle for your reference.

Thanks

   <div class="btn-group">
   <div >
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
            <ul class="dropdown-menu scrollable-menu scrollbar" role="menu" id="ex4" >
                <li><a href="#">Drop1</a></li>
                <li><a href="#">Drop2</a></li>
                <li><a href="#">Drop3</a></li>
                <li><a href="#">Drop4</a></li>
                <li><a href="#">Drop5</a></li>
                <li><a href="#">Drop6</a></li>
                <li><a href="#">Drop7</a></li>
                <li><a href="#">Drop8</a></li>
                <li><a href="#">Drop9</a></li>
                <li><a href="#">Drop10</a></li>
                <li><a href="#">Drop11</a></li>
                <li><a href="#">Drop12</a></li>
                <li><a href="#">Drop13</a></li>
                <li><a href="#">Drop14</a></li>
            </ul>
            </div>
     </div>

here is css:-

 .scrollbar{ 
    background-color:lightgray;height: auto;
    max-height: 200px;
    overflow-x:hidden;
    overflow-y:scroll; 
    min-width: 135px;
    margin-top: 0px; 
   }
  #ex4::-webkit-scrollbar { width:10px;background-color:#cccccc; } 
  #ex4::-webkit-scrollbar-thumb { background-color:#B03C3F;border-radius:10px; }
  #ex4::-webkit-scrollbar-thumb:hover { background-color:#BF4649;border:1px solid #333333; }
  #ex4::-webkit-scrollbar-thumb:active { background-color:#A6393D;border:1px solid #333333; } 

Answer 2

structure the html like this and apply the scroll to the inner UL

<ul class="dropdown-menu list-group">
    <li>
        <ul class="list-group" id="scroller">
            <li class="loading empty">menu item</li>
        </ul>
    </li>
</ul>