I have the following dropdown
<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
dropdown content goes here
</ul>
The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?
This question is related to
css
twitter-bootstrap
drop-down-menu
If you wants to center the dropdown, this is the solution.
<ul class="dropdown-menu" style="right:auto; left: auto;">
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
I found this thread that provides a solution:
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
Hope to know whether Bootstrap provides config for doing this, not via the above css.
Cheers.
Based on Bootstrap doc:
As of v3.1.0, .pull-right is deprecated on dropdown menus. use .dropdown-menu-right
eg:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});
To detect vertical position you can also add
$( document ).ready(function() {
var liparent=$(".dropdown");
var yOffset=liparent.offset().top;
var toTop=($(document).height()-yOffset)<yOffset;
liparent.toggleClass("dropup",toTop);
});
Boostrap has a class for that called navbar-right
. So your code will look as follows:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
Source: Stackoverflow.com