css - How do you limit the number of items on show in the bootstrap btn-dropdowns -
i making search bar bootstrap , 1 of elements category list. problem @ moment when press category button shows every single category in list @ same time - making ui awful! how can limit number of concurrent options on show?
this example of problem:
for example might want show first 5 options , have scroll bar rest?
this markup used create have far:
<form class="navbar-form" role="search" action="/search" method="get"> <div class="input-group"> <input type="text" class="form-control" placeholder="search event" name="q" id="q"> <div class="input-group-btn"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <% @categories.each |category| %> <% category.sub_categories.each |sub_category| %> <li><a href="#"><%= sub_category.name %></a></li> <% end %> <% end %> </ul>
a fiddle working try show problem can found here: http://jsfiddle.net/c7vculsa/2/
why not add overflow ul?
http://jsfiddle.net/0lmjppsz/1/
.menu-scroll { overflow-y: scroll; max-height: 200px; }
Comments
Post a Comment