I have a bootstrap drop down what I'm trying to achieve is how can I center the drop-down menu to the center of the button? Right now it's being aligned to the left or right of the button based on the available space on the area. Thanks in advance.
.dropdown {
margin-left: 40%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>
One way to do this would be to use transform: translate(calc(-50% + 20px), 40px);.
I had to add !important in the example, but if you have access to the code that is setting the style attribute on the menu, you can update the transform there instead.
.dropdown {
margin-left: 40%;
}
.dropdown-menu {
transform: translate(calc(-50% + 20px), 40px) !important;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>
Related
$(".sidebar_nav-main li").on("click", function() {
$(".sidebar_nav-main li").removeClass("active");
$(this).addClass("active");
});
$(".sidebar-subchild-collapse li").on("click", function() {
$(".sidebar-subchild li").removeClass("selected");
$(this).addClass("selected");
});
.active {
box-shadow: rgb(237, 156, 40) 4px 0px 0px inset;
background-color: rgba(255, 255, 255, 0.05);
}
.selected{
background-color: rgba(255,255,255,.05);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type=text/css href="Sidebar.css">
</head>
<body>
<div class="sidebar-left" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-title">Sidebar</div>
<div class="sidebar-collapse" id="sidebar-collapse">
<i class="fa-solid fa-bars" ></i>
</div>
</div>
<div class="sidebar">
<div class="sidebar-content">
<nav class="sidebar_nav" role="navigation">
<ul id=sidebar-accordion class="sidebar_nav-main">
<li class="sidebar-link dropdown" data-toggle="collapse" data-target="#submenu" aria-expanded="false">
<a href="#" class="sidebar_main-link">
<span class="sidebar-item">Menu</span>
</a>
<div class="sidebar-subchild-hover">
<ul class="dropdown-menu sidebar_submenu">
<li class="dropdown-item sidebar_submenu-item"><span>Menu 1</span></li>
<li class="dropdown-item sidebar_submenu-item"><span>Menu 2</span></li>
</ul>
</div>
<div class="sidebar-subchild-collapse" onclick="event.stopPropagation()">
<ul data-parent="#sidebar-accordion" id="sidebar_submenu" class="collapse sidebar_submenu">
<li class="gdc-sidebar_submenu-item selected"><span>Menu 1</span></li>
<li class="gdc-sidebar_submenu-item"><span>Menu 2</span></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="./Sidebar.js"></script>
</body>
</html>
Good Day and very much need help! I am doing the sidebar menu. The problem I facing now is when the active class for my parent menu is able to run. Switching between multiple parent menus will show the correctly active class. But when using the same script on the submenu, it was not able to switch between multiple submenus. The selected class keeps staying at the first submenu item and will not change. I am still thinking about how could this happen. If anyone can help then it was so much appreciated!!
I have a bootstrap drop down and on the button, I have a text and an icon. What I want is to align the text all the way to the left and align the icon all the way to the right without having to grid the button with other elements. Thanks in advance.
.dropdown {
display: flex;
width: 40%;
height: 10vh;
border: none;
}
.dropdown button {
font-size: 1.8vw;
color: #ffffff;
width: 100%;
height: 100%;
border: none;
}
.dropdown button i {
font-size: 1.8vw;
margin: auto;
}
.dropdown button::after {
display: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
drop me
<i class="fa-solid fa-angle-down"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Most of your CSS are not needed, you can use some of bootstrap's utility classes to achieve the expected result.
You don't have to use .dropdown button::after{} to remove bootstrap's default dropdown caret. Just remove .dropdown-toggle from the button.
You can then use this d-flex justify-content-between align-items-center class to align the text and the icon.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown">
drop me
<i class="fa-solid fa-angle-down"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
I have a bootstrap drop-down. What I'm trying to achieve is once you click on the button the menu appears but when you click on the button again the menu doesn't hide. I want the menu to hide on click of the button. The method I tried didn't work and I think there should be a more suitable way to hide the menu on click of the button. How can I achieve this? Thanks in advance.
$('.dropdown button').on('click', function() {
if ($(this).attr('class').split(" ").pop() == 'show') {
//not working menu is getting hidden before showen
$(this).parents('.dropdown').find('ul').hide()
}
});
.dropdown {
margin-left: 40%;
}
.dropdown-menu {
transform: translate(calc(-50% + 20px), 40px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>
Would you prefer using the "toggle" instead?
$(function () {
$("button").click(function () {
$(".dropdown-menu").toggle();
});
});
i have created a dropdown menu with provinces name and below each province its citesties are mentioned. I want these cities to appear in submenu on left side of province when it is clicked.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<select name="campus" id="campuslocation" class="browser-default" required="">
<optgroup label="Eastern Cape">
<option value="31">Umtata / Mthatha</option>
<option value="32">Willowmore</option>
<option value="33">Willowvale</option>
</optgroup>
<optgroup label="Free State">
<option value="47">Koppies</option>
<option value="48">Kroonstad</option>
</optgroup>
</select>
select is not the right element for this task, a dropdown is much better suited.
There is no default way to create submenus but it's easy enough to achieve.
$(document).ready(function() {
$('.dropdown-submenu a').on("click", function(e) {
$(this).parents('ul').find('.dropdown-submenu ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All South Africa
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Eastern Cape</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Umtata / Mthatha</a></li>
<li><a class="dropdown-item" href="#">Willowmore</a></li>
<li><a class="dropdown-item" href="#">Willowvale</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Free State</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Koppies</a></li>
<li><a class="dropdown-item" href="#">Kroonstad</a></li>
</ul>
</li>
</ul>
</div>
Hope, this will help. We can able to use , instead of select.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.dropdown {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Eastern Cape <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
<li><a tabindex="-1" href="#">Willowmore</a></li>
<li><a tabindex="-1" href="#">Willowvale</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Free State <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
<li><a tabindex="-1" href="#">Willowmore</a></li>
<li><a tabindex="-1" href="#">Willowvale</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Here is some code from my project:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
How can I make the text(select) and the caret appear in one line?
use this css:
#btnText{
display: inline;
padding-right: 10px;
}
Put the Span with the caret in the #btnText div.
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
#btnText{
display: inline-block;
margin-right: 10px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
By simply adding display:inline-block to your #bigText div as in the snippet below. I have also added some margin for spacing.
#btnText{
display: inline-block;
margin-right: 5px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>