[英]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. 我正在尝试创建一个下拉列表,其中包含两个命令(Sort asc和Sort des),这些命令将一键执行,并在顶部列出,其后是“选择过滤”下的一部分,其中包含命令“全部切换” (不关闭下拉列表)和名称的可滚动列表(不滚动顶部的命令),可通过复选框选择它们。
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. 我已经在标签上使用div:s和class进行了实验,但是我无法弄清楚。 Please help me get this right. 请帮助我解决这个问题。
<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>
<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>
<script>
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
if($(this).hasClass('dd-list')) {
e.stopPropagation();
}
});
</script>
Using: Bootstrap-3.1.1 使用:Bootstrap-3.1.1
And my own Styles.css: 和我自己的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;
}
The reason you're getting the bold is that Bootstrap css for the label selector is bold. 之所以使用粗体,是因为标签选择器的Bootstrap css是粗体。 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. 为了使滚动条正确,您不能告诉li.dropdown-menu-form的最大高度为100px,滚动的溢出值为y,因为它将使用类dropdown-menu将其应用于每个单独的列表项-形成。 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. 因此,您可以尝试将下拉列表包装在div中,并为其分配一个不同的类,您可以在其中应用max-height和overflow-y属性。 (Just like you wrapped your dd-list). (就像包裹了dd列表一样)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.