title: How do you limit the number of items on show in the bootstrap btn-dropdowns
body: <p>I am making a search bar with bootstrap and one of the elements is a category list. The problem is at the moment when I press the category button it shows every single category in the list at the same time - making the UI awful! How can I limit the number of concurrent options on show?</p>
  
  <p>This is an example of the problem:</p>
  
  <p><img src="https://i.stack.imgur.com/xwTNh.png" alt="enter image description here"></p>
  
  <p>For example I might just want to show the first 5 options and then have a scroll bar for the rest?</p>
  
  <p>This is the markup used to create what I have so far:</p>
  
  <pre><code>&lt;form class="navbar-form" role="search" action="/search" method="get"&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" class="form-control" placeholder="Search for an event" name="q" id="q"&gt;
          &lt;div class="input-group-btn"&gt;
          &lt;div class="btn-group" role="group"&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;
    Dropdown
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" role="menu"&gt;
  &lt;% @categories.each do |category| %&gt;
  &lt;% category.sub_categories.each do |sub_category| %&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;%= sub_category.name %&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;% end %&gt;
  &lt;% end %&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>
                  
              
          
          </p>
  
  <p>A fiddle we are working with to try to show the problem can be found here: <a href="http://jsfiddle.net/c7vcuLsa/2/" rel="nofollow noreferrer">http://jsfiddle.net/c7vcuLsa/2/</a></p>