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
Related
I created a dropdown menu in Bootstrap in HTML. All I want to do is adding an image for each one of the elements of the dropdown list.
But when I try to execute it nothing happens. The dropdown list is ok but the images dont appear. Can someone help to add the images in a dropdown menu? Thanks!
<div class="dropdown">
Lingua    
<button class=" btn btn-default " type="button" data-toggle="dropdown">Italiano
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
<img src="images/flag.png" width="35" height="30">1</a>
</li>
<li>
<a href="#">
<img src="images/account.png" width="35" height="30">2</a>
</li>
</ul>
    Paese    </tab>
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">Italia
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1
</li>
</ul>
</div>
Here is my result:
I'm sorry for the paint but I have to remove that button.
Yoc Can Use This Code In Your Css File
ul {
list-style-image: url('Some.gif');
}
If i place a media object inside Bootstrap drop down, the menu should expand in width to accommodate media. In the example i wrote in the JSiddle, the heading and text below heading should not wrap to new line.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="account">
<form action="/tracker/logout" method="post">
<button type="button" id="accountHolder" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Lokesh<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div class="media">
<img class="media-object pull-left" alt="" src="http://www.google.com/homepage/images/google_favicon_64.png">
<div class="media-body">
<a><h4 class="media-heading">Media heading</h4></a>
This is some sample text
</div>
</div>
</li>
</ul>
</form>
</li>
</ul>
please make output window larger to see menu on right corner as i want menu on right side.
https://jsfiddle.net/DTcHh/12500/
Thanks
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.
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>
I'd like to know how can i build a btn-group with a sub-menu.
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
and i' like to put this in the btn-group:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
This is what i want: (but with twiiter-bootstrap)
Explanation: Basically this btn could go anywhere, I just put it in a button group to show there is nothing special about this button.
So first, you want to add data-toggle= dropdown to your button. Then, you need to add your standard drop down menu to the button. I guess the key here is knowing that there is nothing stopping you from adding a second dropdown menu into a submenu.
So go a head an add a submenu into whatever < li > you want, and inside that, just another dropdown-menu. So essentially we have Button -> dropdown menu -> dropdown submenu -> dropdown menu -> sub elements. Alittle confusing but pretty straight forward I think
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<!--start of dropdown button -->
<button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
</ul>
</li>
</ul>
</div>
<!--end of dropdown button -->
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
Edit:
After playing with this alittle, I realized that you do need the
<div class="btn-group">
wrapping the button, even if it is going to just stand alone. I created this updated fiddle to demo it.
http://jsfiddle.net/jamiematthews/yWrRA/1/
Took a bit of experimenting but here's how you go about doing it:
http://jsfiddle.net/ewQTE/2/
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropwn Link #1</li>
<li>Dropwn Link #2</li>
</ul>
</div>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>