<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown">
<a class=dropdown-toggle data-toggle=dropdown href="#">
<i class=material-icons>Button</i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li><i class=ti-user></i> Profile</li>
<li><i class=ti-layout-sidebar-left></i> Logout</li>
</ul>
</li>
Everything works fine in the browser even when shrinking it. But when I try to click a submenu HREF doesn't work it just closes the drop-down menu it doesnt redirect...
This is the official and proper way to make a bootstrap 3.3.7 dropdown button
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another Link</li>
</ul>
</div>
Reference bootstrap 3 - drop-down button
And also load the js file before the closing body tag. Working demo
I am developing this website and a you can see i'm using Wordpress and Bootstrap.
I'm trying to add a <button> element with a dropdown menu inside. I just created it with this code
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
...but does not work. What I'm doing wrong?
Any tips?
Thanks in advice
You are missing the boostrap JS as inclusion in your website
Because I am using this Navbar as a site editing tool rather than a normal Navbar, I require a solution that doesn't involve editing the Bootstrap code and instead use some type of style="" edit instead as I am including the Bootstrap code from elsewhere to make things light, so I can use it on multiple sites.
I am trying to stop the fixed to top Navbar from overlaying the top of the website, this is showing the Logo and top links under the Navbar, instead I am looking to try to layer it on top until the user scrolls down where the Navbar will then cover the website as it should on its way down. Here is the code I am using, if anybody can help me find a solution I would be appreciative!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have attempted to introduce:
style="padding-top:100px;" And changed the px but with no luck, this then totally covers the top of the websites.
You just have to apply the padding style at the body instead the div:
<body style="padding-top: 100px">
It's given in the docs: http://getbootstrap.com/components/#navbar-fixed-top :-)
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the
core Bootstrap CSS.
Am bit new to angularjs and bootstrap.
Am trying to add a simple dropdown. But it is not working.
Tried out the suggestion # Bootstrap 3 simple dropdown not working. That is also not working.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li><a ui-sref="e">e</a></li>
<li><a ui-sref="f">f</a></li>
<li><a ui-sref="g">g</a></li>
<li><a ui-sref="h">h</a></li>
<li><a ui-sref="i">i</a></li>
<li><a ui-sref="j">j</a></li>
<li><a ui-sref="k">k</a></li>
</ul>
</li>
Complete code # http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview
Hope someone would help me out.
NOTE: Most answers here are outdated! The main issue is that the dropdown directive is not available as a class anymore, but only as an attribute, and that it has been renamed to uib-dropdown.
I was stuck here for a while, but changing the class into an attribute worked as a charm.
Also, you need to use the 'uib-' prefix for each directive instead of plain names.
<li uib-dropdown>
<a uib-dropdown-toggle>a<span class="caret"></span></a>
<ul uib-dropdown-menu>
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
</ul>
</li>
(And of course, make sure you did not forget to include the ui.bootstrap module in your app.)
var app = angular.module('App', ['ui.router','ui.bootstrap']);
You need to include ui.bootstrap module in your app.
var app = angular.module('App', ['ui.router','ui.bootstrap']);
and also remove ui-sref from the dropdown trigger.
<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>
Plnkr
data-toggle="dropdown" should be removed. I guess it creates some conflict with ui.bootstrap
<li class="dropdown" uib-dropdown>
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
<span class="glyphicon glyphicon-flag"></span>
Events
<span class="caret"></span>
</a>
<ul class="uib-dropdown-menu" role="menu">
<li>
Event 1
</li>
<li>
Event 2
</li>
</ul>
Hope this helps.
You need to add on-toggle to your anchor tag, to avoid conflicts between bootstrap dropdown angular dropdown class, this issue is a closed on angular-ui(https://github.com/angular-ui/bootstrap/issues/2156)
I found a great resource from here regarding the subject, as I had the same issue. I'll outline what I did below.
Download ui bootstrap
Move zipped file to target directory for app, and unzip
locate the latest edition of the ui bootstrap release, which in my case, is located at "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
Include the minified js file in your main .html file:
<script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
Go back to Angular directives and scroll down to the dropdown section. Copy their javascript into your primary js file and html samples and customize as usual
That's what did it for me. Hope that helps anyone else with the same issue.
First make sure you included ui.bootstrap module in your app
var app = angular.module('App', ['other inclusions','ui.bootstrap']);
Then if the problem still persists don't use dropdown-toggle and dropdown as directives. Instead use as class. i.e. class = 'dropdown-toggle' etc.
For Example :
<div class="dropdown dropdown-append-to-body">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
Refer this issue.
https://github.com/angular-ui/bootstrap/issues/2156
Worked out pretty simple the solution (after trying to find it for ages) Simply add "dropdown-toggle" directive to your button
<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>
Well, I noticed that the attribute "dropdown" need to be added to the li element, once that is added, everything will be fine.
<li class="dropdown" dropdown>
... <span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>
for Angular 2:
add npm install ng2-bootstrap --save
then follow the example from GITHUB:
https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown
I've isolated a malfunctioning component from my project.
I'm trying to enable tab selection for an input search element with a drop down selector
I'm using hosted jquery / bootstrap libraries
Problem: When i tab from the input element to the dropdown component, and hit the down key, the drop down shows, but i can't use the up or down arrows to navigate through the dropdown elements.
Expected: I should be able to use the arrow keys to navigate items in the list. The example in the documentation is keyboard selectable, and shows a corresponding focus state.
Documentation: http://getbootstrap.com/components/#input-groups
Example HTML
<div class="row">
<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">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<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 -->
Fiddle: http://jsfiddle.net/YXNMB/
You need to add role="menu" to your dropdown UL like so:
<ul class="dropdown-menu pull-right" role="menu">
Without the role="menu" the dropdown component doesn't associate the arrow keys with the drop down elements.