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
Related
I have a website at: https://www.romaheritage.co.uk
The issue is the Bootstrap menu at the top of the page; it works fine on desktop PCs/Laptops, but when viewed on mobile devices (phones/tablets) the two drop-down menu options "Records" & "Misc" won't expand out (at least on Android they won't, not sure about IOS because I can't test it). I think I'm overlooking something which may be obvious to others.
Can anyone view the source for the page and point me in the direction of what I've done wrong?
I made it work by replacing the a.dropdown-toggle by a div.dropdown-toggle.
The css is not good then but I believe you can make this right.
Here's the code
<div class="collapse navbar-collapse" id="tb-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#about">About</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Records <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>BMD</li>
<li>Census</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/newspaper-articles">Newspapers</a></li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#blog">Blog</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc. <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>Queen Victorias Journals</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#contact">Contact</a></li>
</ul>
</div>
try this one...
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});
I've seen several posts similar to this, but none of the solutions worked. I have a drop-down menu on my navigation. The nav looks like this
<ul>
<li role="presentation" class="dropdown">
Insurance <span class="caret"></span>
<ul class="dropdown-menu">
<li>Insurance</li>
<li>Home</li>
<li>Boat</li>
<li>Health</li>
</ul>
</li>
<li class="navdivider"></li>
<li role="presentation">
Customer Service
</li>
<li class="navdivider"></li>
<li role="presentation">
Claims
</li>
</ul>
When I click on the drop-down menu it shows up fine. When I click out of it or click the 'Insurance' link on the navigation the option on the navigation disappears. I get
<li role="presentation" class="dropdown" style="display: none;">
<a href="insurance.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
I've seen this same error posted elsewhere and I'm aware that it is a conflict with jquery & bootstrap, but I can't seem to fix it using the suggested fixes. I am not trained in javascript, so I'm unsure if I implemented incorrectly. Thank you.
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.
I am using bootstrap version 2.0
I have the following html structure -
Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.
<li style="margin-left: 12px;">
<div class="dropdown" style="margin-top: 5px;">
<a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
Filter by Team
</a>
<ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
The fiddle can be found here - http://jsfiddle.net/ktgrw/
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
Here's the updated fiddle with the correct bootstrap version and the attribute removed.
Also the disabled class is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.
The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/" we need to be sure that we are running this page on a website where these links exist.
To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view) and because it uses absolute url href="http://www.google.com", it works just fine.
I faced same problem with bootstrap framework and at the end got the solution (worked for me).
Import all your required javascripts, mainly jquery.js .
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
I had the same problem too but after removing the data-toggle attribute, my <a> links are working just fine.