I created a Bootstrap dropdown using this code:
<div class="dropdown" style="margin-bottom: 20px;">Ordered by
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="primary">Random</span></a>
<ul class="dropdown-menu" role="menu">
<li>Random</li>
<li>Earliest</li>
<li>Latest</li>
</ul>
post.
</div>
But as you can see, the dropdown isn't aligned with the link:
How can I get it to align, and if possible, also display the white triangle on top pointing to the link?
JSFiddle example
Is this what you are looking for?
http://jsfiddle.net/t75g5/
<span>Ordered by<span>
<div class="dropdown mydropdown" style="margin-bottom: 20px;">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><span class="primary">Random <b class="caret"></b></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Random
</li>
<li>Earliest
</li>
<li>Latest
</li>
</ul>post.</div>
Related
I am using following HTML to create a three level inline list. First Level shows by default on page load. When I click on first level menu i.e. 'Courses' it expands and shows second level menus. But when I click on second level menus i.e. 'Computer Courses' or 'Civil Courses', they do not expand to show third level menus.
Thanks in advance for any help.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false" >Computer Courses<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>IT Advance</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Web Designing</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Civil Survey</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Quantity Survey</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm not sure how twitter-bootstrap works exactly, but I can imagine having multiple <a> tags with href="#"s messes this up. Moreover, your html is not valid (you can have <ul> as a child of another <ul>) and perhaps wrapping a <ul> within an <a> is also not good practise.
Use javascript onclick functions for the expand behaviour, or dive a little deeper into twitter-bootstrap, in case they do support something like this.
P.S. Consult https://validator.w3.org/nu/#textarea to see what html is valid.
I want user to be able to select everything within Morphological Transformation (Erosion, Dilation, Opening, Closing), but not 'Morphological Transformation' itself. Thank you for every answer!
HTML Code:
<div class="container">
<div class="row">
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Select Pre-Processing Method <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Normalisation</li>
<li>Canny Edge Detection</li>
<li>Smoothing</li>
<li></li>
<li class="divider"></li>
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Morphological Transformation</a>
<ul class="dropdown-menu">
<li><a>Erosion</a></li>
<li><a>Dilation</a></li>
<li><a>Opening</a></li>
<li><a>Closing</a></li>
</ul>
</li>
...
</ul>
</li>
</ul>
</div>
</div>
You can disable anchor events and keep hover effects by using this:
.disabled-link:hover{
background: red;
}
.disabled-link:active{
pointer-events: none;
}
Test
It is usable for all modern browsers:
click!
I am using the Bootstrap 3 custom buttons but can't for some reason change the brand text color nor the dropdown triangles. I've tried a couple of things, but still no luck...
<div class="container">
<div class="row" style="margin-top: -30px;">
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown" style="margin-right: 70px; margin-left: 60px;" >
<a class="btn btn-inverse :active" data-toggle="dropdown" href="#">
Wristbands <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
<li class="dropdown" style="margin-right: 70px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Hawaii <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
In your example, I don't see any text in the navbar-brand div. Is that what you're talking about?
Anyhow, to answer your question, if you have text in navbar-brand, you'd use something like:
.navbar-default .navbar-brand {
color: blue !important;
}
And for the dropdown arrows, something like:
span.caret {
color: red;
}
I need to display the submenu to left align as right align making my layout messy. I'm using bootstrap.
<div class="btn-group">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Bootstrap has the option to make drop downs positioned out to the right. You can see an example of this on the bootstrap navbar section.
If you add the class navbar-right to your btn-group you should find that the dropdown changes drop direction.
<div class="btn-group navbar-right">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Here is a JSFiddle
I am using jQuery Ui to make list items selectable on my web app.
Inside each item from this list I have a dropdown button.
When I'm adding the selectable option to the list, the dropdown options doesn't open since the item (the button's parent) is being selected, and the button is not clickable anymore, as if the selectable option "hides" the clickability of the button.
How can i fix it?
My code looks like this:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown " >
<a class="dropdown-toggle " id="dLabel" role="button" data-toggle= "dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu" >
<li > ng-href="#" >blabla1</a></li>
<li > ng-href="#" >blabla2</a></li>
<li > ng-href="#" >blabla3</a></li>
</ul>
</div>
</li>
First you code is missing a few parts. See comments below.
I took what you had and cleaned it up:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown "> <a class="dropdown-toggle " id="dLabel" role="button" data-toggle="dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu">
<!-- You were missing the <a in front of each ng-href -->
<li> <a ng-href="#">blabla1</a>
</li>
<li> <a ng-href="#">blabla2</a>
</li>
<li> <a ng-href="#">blabla3</a>
</li>
</ul>
</div>
</li>
<!-- You were missing a closing ul -->
</ul>
and you can view it working here on js fiddle
I added the following to resources and it worked ok for me:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css