title: Bootstrap dropdown with scrollable selection list
body: <p>I am trying to make a dropdown list that has two commands (Sort asc and Sort des) that will be executed on one click and is listed at the top followed by a section under "Choose Filtering", that has a command "Toggle All" (that does not close the dropdownlist) and a scrollable list of names (that does not scroll the commands at the top) that can be selected with help of checkboxes.</p>
  
  <p>I have come a good way with this, the part that I can't make happen is the the scroll of only names. When I try to implement the checkboxes then the names change appearance, I want them with the checkbox aligned with the other commands then a padding and then the name (not boled).
  But I get left alinged boxes, no padding and bold names.
  And then the scrollbar, I can't set it over just the names, it goes over all the dropdown-menu or I get a separate scroll for each name is in the coed below.
  I want to make a subclass to : 
  that allows me to set the scrollbar for just those menuitems.</p>
  
  <p>I have experimented with div:s and class on labels, but I can't figure it out.
  Please help me get this right.</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;li class="dropdown"&gt;
  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Names &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sort Ascending&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sort Descending&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;Choose Filtering&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Toggle All&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;       
          &lt;li class="dropdown-menu-form"&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Name 1&lt;/label&gt;&lt;/li&gt;
          &lt;li class="dropdown-menu-form"&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Name 2&lt;/label&gt;&lt;/li&gt;
          &lt;li class="dropdown-menu-form"&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Name 3&lt;/label&gt;&lt;/li&gt;
          &lt;div class="dd-list"&gt;
              &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Name 4&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Name 5&lt;/label&gt;&lt;/li&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <h1>Corrected HTML - Now working:</h1>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Consult &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li class="dropdown-header"&gt;Choose sort method&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#asc"&gt;Sort Ascending&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#desc"&gt;Sort Descending&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;Choose Filtering&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;ul class="dropdown-menu-form" role="menu"&gt;
                  &lt;li&gt;&lt;label&gt;Toggle All&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" /&gt;Name 1&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" /&gt;Name 2&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" /&gt;Name 3&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" /&gt;Name 4&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" /&gt;Name 5&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" /&gt;Name 6&lt;/label&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="btn btn-default btn-apply" name="filter" value="Filter" type="submit"&gt;Apply Filter&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>Java Script</h1>
  
  <pre><code>&lt;script&gt;
      $('.dropdown-menu').on('click', function(e) {
          if($(this).hasClass('dropdown-menu-form')) {
              e.stopPropagation();
          }
          if($(this).hasClass('dd-list')) {
              e.stopPropagation();
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <p>Using: Bootstrap-3.1.1</p>
  
  <p>And my own Styles.css:</p>
  
  <pre><code>li.dropdown-menu-form {
      padding: 5px 10px 0;
      max-height: 100px;
      overflow-y: scroll;
  }
  
  #dd-list {
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 20px;
      padding-left: 10px;
      font-weight: normal;
      overflow-y: scroll;
  }
  
  
  Corrected CSS:
  ul.dropdown-menu-form {
      padding-left: 20px;
      list-style-type: none;
      max-height: 100px;
      overflow-y: scroll;
  }
  </code></pre>