CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapdrop-down-menu
John Master
John Master

Reputation: 329

Bootstrap dropdown with scrollable selection list

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.

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.

I have experimented with div:s and class on labels, but I can't figure it out. Please help me get this right.

HTML

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Names <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sort Ascending</a></li>
        <li><a href="#">Sort Descending</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Choose Filtering</li>
        <li class="divider"></li>
        <li><a href="#">Toggle All</a></li>
        <li class="divider"></li>       
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 1</label></li>
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 2</label></li>
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 3</label></li>
        <div class="dd-list">
            <li><label><input type="checkbox">Name 4</label></li>
            <li><label><input type="checkbox">Name 5</label></li>
        </div>
    </ul>
</li>

Corrected HTML - Now working:

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Consult <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">Choose sort method</li>
        <li class="divider"></li>
        <li><a href="#asc">Sort Ascending</a></li>
        <li><a href="#desc">Sort Descending</a></li>
        <li class="divider"></li>
        <li class="divider"></li>
        <li class="dropdown-header">Choose Filtering</li>
        <li class="divider"></li>
        <li>
            <ul class="dropdown-menu-form" role="menu">
                <li><label>Toggle All</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 1</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 2</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 3</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 4</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 5</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 6</label></li>
            </ul>
        </li>
        <li class="divider"></li>
        <li><button class="btn btn-default btn-apply" name="filter" value="Filter" type="submit">Apply Filter</button></li>
    </ul>
</div>

Java Script

<script>
    $('.dropdown-menu').on('click', function(e) {
        if($(this).hasClass('dropdown-menu-form')) {
            e.stopPropagation();
        }
        if($(this).hasClass('dd-list')) {
            e.stopPropagation();
        }
    });
</script>

CSS

Using: Bootstrap-3.1.1

And my own Styles.css:

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

Upvotes: 2

Views: 8253

Answers (1)

jme11
jme11

Reputation: 17372

The reason you're getting the bold is that Bootstrap css for the label selector is bold. So to change that: 

li.dropdown-menu-form label, .dd-list li label {
  font-weight: normal;
}

To add padding after your checkboxes:

li.dropdown-menu-form input, .dd-list li input {
  display: inline-block;
  margin-right: 10px;
}

To get your scrollbar correct, you can't tell li.dropdown-menu-form to have a max-height of 100px and overflow-y of scroll, because that's going to apply it to every individual list item with the class dropdown-menu-form. So, you could try wrapping your dropdowns in a div and assigning it a different class to which you can apply the max-height and overflow-y properties. (Just like you wrapped your dd-list).

Upvotes: 1

Related Questions