Bootstrap: Button dropdown does not align right when on right side of page

[robborrego]

I currently have a dropdown button on the right side of my page. When clicked, the left edge of the dropdown aligns with the left edge of the button. At certain window widths, the dropdown gets cut off by the window edge. Having the right side of the dropdown align with the right side of the button would solve this.

http://i.imgur.com/yeYqW.png

[simonfranz]

nice, i also want to post this at the same time :)
Here is a jsfiddle what happens.
http://jsfiddle.net/TFxgK/

If a button in a .pull-right the button should opens to the left.

:+1:

[simonfranz]

just a quick workaround is to set this class ".navbar .nav.pull-right .dropdown-menu" to replace to ".pull-right .dropdown-menu"

here is a code-sample to get it to work without editing the bootstrap.css

.pull-right .dropdown-menu:after {
    left: auto;
    right: 13px;
}
.pull-right .dropdown-menu {
    left: auto;
    right: 0;
}

[robborrego]

Thanks for the quick fix simonfranz! Works perfectly.

Still keeping this open to attract attention from Bootstrap team.

[mdo]

Just resolved this in 2.0.2-wip. I've abstracted the styles mentioned here (we used them in the navbar's CSS) to be generalized for use everywhere else. The .dropdown-menu:after, however, has still be relegated to the navbar as that's the only place it applies for now.

Thanks!

[troyharvey]

Here's a jsbin .dropdown-menu demo of this fix. Thank you for this!

[pushpinderbagga]

Thanks for the tip Harvey!

[coding-idiot]

Thanks, pull-right dropdown-menu worked for me.

[RobinsonSCarvalho]

you can use the class dropdown-menu-right in the version 3.3 of the bootstrap

[Johncy1997]

<div className="dropdown-menu dropdown-menu-right"> <a className="dropdown-item" href="#">Mobile Application</a> <a className="dropdown-item" href="#">Web Application</a> <a className="dropdown-item" href="#">Backend Developement</a> </div>

This is worked for me.

[prowler0305]

Here is the example that worked for me by @troyharvey. Forced to use bootstrap3 editing the Views associated with the Flask-Admin extension and couldn't figure out how to get my dropdown items to line up under the menu button. This did the trick. Just adding the .btn-group and .pull-right classes on the overall div wrapping my dropdown did the trick. Thanks @troyharvey.

Here's a jsbin .dropdown-menu demo of this fix. Thank you for this!