Can you please take a look at this demo and let me know why I am not able to properly animate the .fa classes? As you can see the animation works fine on clicking on each button but is not affecting to other buttons. For Example if you click on Action A and then click on Action B the arrow on Action A still is in previous state.
$(".dropper").on("click", function(){
//$('.dropper').find('.fa').removeClass('css-chevron-down').addClass('css-chevron-right');
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
.css-chevron-down{
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right{
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div></div>
</div>
You have to write some code to bring the arrow to its original state, when the dropdown closes. The event you need for that is hide.bs.dropdown. The following piece of code will do the trick:
Code:
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
Also, be sure to check out the following snippet to see live how it works.
Snippet:
/* ----- JavaScript ----- */
$(".dropper").on("click", function() {
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
/* ----- CSS ----- */
.css-chevron-down {
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right {
transition: all 0.5s ease;
}
<!----- HTML ----->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-6 ">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
<div class="col-md-6" style="float:left; margin-left:200px;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
Related
I am working on the below snippet. How can I keep hover rule affected on .btn-default while still hovering on it's associated .dropdown-menu?
$(function(){
$('.btn-dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
body{
padding:30px;
}
.btn-default:hover{
color:red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-3">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List One
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List Two
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
</div>
See If this is what you exactly looking for. I have added .open parent in your CSS and removed .hover
Whenever you are appending .open class it will add the CSS
$(function(){
$('.btn-dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
body{
padding:30px;
}
.open .btn-default{
color:red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-3">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List One
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List Two
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
</div>
I'm trying to build a list-group, with each item in the list have an icon which will trigger a dropdown menu. I have a few problems how to position the dropdown, also the glyphicon is not visible at all, unless I put text in the button, and then it has a bad position.
Also I want to build and position the dropdown dynamically with javascript, but first I need to see one that is position correctly, then I will do all the JS DOM work..
Thanks for help!
jsfiddle:
https://jsfiddle.net/DTcHh/24900/
Some code:
<div class="container">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
</ul>
</div> <!--.col-sm-4 -->
<div class="col-sm-8">
</div>
</div>
I've updated the version of bootstrap css to a cdn version which includes the glyphicons. I have then moved the anchor element next to the icon which I believe is what you're looking for. I also removed your custom css which was causing a layout issue.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-option-vertical"></i>
option
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
https://jsfiddle.net/DTcHh/24902/
I am slightly new to web development and I am trying to teach myself. I am trying to make a searchbar with a dropdown, so far I have made it but I have a problem with the last button, it will be used as the search button. It doesnt fix on the left hand side, it just floats under the bar.
<div class="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn"><span class="fa-search"></span></button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<button type="button" class="btn-search"><span class="fa-search">
</div><!-- /input-group -->
</span></button>
</div><!-- ...search -->
This is how you would do a search with a dropdown- you are almost there.. just move the input after the ul
<div class="col-lg-5">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Categories <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
link to demo
I am trying to use the twitter bootstrap to show input with dropdown button as mentioned in http://getbootstrap.com/components/
Below is the complete html same the one specified in the sample, But I am unable to get this working.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</body>
</html>
Request anyone to point out what is going on wrong as the dropdown is missing?
Thanks in Advance,
-Senthil
You are missing bootstrap js
Add this js in your <head> section
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
You'll want to add a "data-target" attribute to the button and an "id" to the dropdown.
<button data-target="#MYIDHERE" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
<ul id="MYIDHERE" class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
Is there a way to recognize that angular-bootstrap dropdown-menu is closed?
I want to recognize this event and run specific function.
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Add to your parent div an on-toggle event
<div class="btn-group" dropdown is-open="status.isopen" on-toggle="toggled(open)">
And handle it witin the controller
$scope.toggled = function(open) {
if (open) {
console.log('is open');
} else console.log('close');
}