I am a very new to Javascript. now I have a dropdown list within django.
---Select a status---
ALL
Expired
Pending
if I select give "ALL" as an example, it would navigate to "/all/" page, this is the correct behavior, but how can I change the text to "ALL" ?
<div id="dropdown1" class="dropdown filter" >
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="placeholder">---Select A Status---</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="active" href={{ view_all }}>All</a></li>
<li><a class="" href={{ view_exipred }}>Expired</a></li>
<li><a class="" href={{ view_pending }}>Pending</a></li>
<li class="divider"></li>
</ul>
</div>
Sorry for the incorrect edit.above are the code here.
Related
I've got a bootstrap 3 drop down and it should close when the user is clicking on the same link again.
Here's my html:
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung</li>
<li class="menu-geselle">Geselle</li>
<li class="menu-meister">Meister</li>
</ul>
</li>
If I click on the a.dropdown-toggle the drop down opens - which is correct. If I click the same link again, the drop down doesn't close.
Can anybody help me with that?
I couldn't find something on SO or anywhere else.
Thanks.
Use this code. It will give you desired result.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ausbildung</li>
<li>Geselle</li>
<li>Meister</li>
</ul>
</div>
You have data-target="#" which prevents it closing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung
</li>
<li class="menu-geselle">Geselle
</li>
<li class="menu-meister">Meister
</li>
</ul>
</li>
Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:
<div class="btn btn-link dropdown account-menu-btn">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Create
</a>
</li>
</ul>
</div>
I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?
<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul id="myModal" class="dropdown-menu pull-right" role="menu">
<li>
<a href='#Url.Action("About", "Home")'>
Create
</a>
</li>
</ul>
</div>
I believe the answer is clearly stated in the twitter-bootstrap javascript section
Your code isn't really too far from what's on there:
<div class="btn btn-link dropdown account-menu-btn">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
<li>
Create
</li>
</ul>
</div>
Hope this helps
You could also try to do it with Javascript and Jquery.
$( '#BUTTONID' ).click(function() {
$( '#MENUID' ).toggle();
});
This is a very condensed version, but it is ought to work.
I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here.
As you can see I have customised the dropdown menu's slightly within the CSS.
HTML:
<!-- City Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li class="dropdown-header">City</li>
<li>Manchester</li>
<li>Liverpool</li>
<li>London</li>
<li>Newcastle</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Town</li>
<li>Wigan</li>
<li>St Helens</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Other</li>
<li>Warwick</li>
<li>Oxford</li>
<li>Cambridge</li>
</ul>
</div>
<!-- Version Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Version <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li>V1</li>
<li>V2</li>
<li>V3</li>
<li>V4</li>
<li>V5</li>
<li>V6</li>
<li>V7</li>
<li>V8</li>
</ul>
</div>
</div>
</div>
</div>
Thanks!
I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select, the standard bs dropdown menu is simply for navigation, not working as a select.
The site was easy to follow and I had this working in minutes :)
I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
I am trying to put together a little dropdown menu with Bootstrap. I put up a sample on JSFiddle here.
The idea would be to have each button trigger a different dropdown list, so that clicking on File gives you a dropdown containing New and Close, clicking on Edit gives you a dropdown containing Copy, Paste and Undo and so on.
However, I get the same dropdown for all buttons. I surely must have done something wrong.
I also had a look at this JSFiddle, linked to by this StackOverflow question, but it doesn't seem to work - no dropdown shows at all when clicking.
Any suggestion?
Here is a copy of the HTML:
<div id="mainMenubar" class="btn-group">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
This should do what you want:
<div id="mainMenubar">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
</div>
Edited to add styling for the navbar as discussed below:
.navbar {
display: table;
}
.navbar .nav > li > a {
padding: 5px;
}
.navbar-inner {
min-height: 0
}
I think you need to use links (anchors) inside the buttons to trigger the dropdowns instead...
<button class="btn btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
File
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</button>
Here's a working demo
EDIT: Here's an alternate version inside a .btn-toolbar so that each dropdown is inside its own btn-group. This works in FireFox: http://bootply.com/61019
I know this is like nearly 4 years old but i stumble across the same problem. ZimSystem have the correct answer but you mentioned that there is still some white spaces left when you copy and paste his code. Thats because his code isnt wrap inside a correct css style.
The fact that is nice when dropdown and buttons style doesn't look messy when put it in the same group, but anoying thing is the dropdown doesnt work properly.
Anyway here is a working code example without the use of modifying and bootstrap.css
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<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 class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<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>
dropdown-toggle class is put on the last button because it will put a border radius at the end making it look neat and finished.
I hope this will help someone else.