Нужна тонкая прокрутка на Ul Bootstrap DropDownList

Я хочу настроить загрузчик выпадающего списка. У моего DropDown много записей. Я хочу добавить тонкую прокрутку в раскрывающуюся часть начальной загрузки.

Пожалуйста, смотрите следующую ссылку -

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

Пожалуйста помоги....

Заранее спасибо.

Источник

2 ответа

Решение

Вот вариант настройки полосы прокрутки с помощью начальной загрузки. Смотрите эту скрипку для справки.

Спасибо

   <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>

здесь 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; }
Источник

Структурировать HTML, как это и применить прокрутку к внутренней UL

<ul class="dropdown-menu list-group">
    <li>
        <ul class="list-group" id="scroller">
            <li class="loading empty">menu item</li>
        </ul>
    </li>
</ul>
Источник
Другие вопросы по тегам