Rodrigo Lira Rodrigo Lira -4 years ago 164
CSS Question

How to position Bootstrap's dropdown menu to the right of a floating right toggle element?

Ok, title should be self explanatory. And yes, I can see on bootstrap docs that they've added the class

dropdown-menu-right
so that it works on situations similar to mine.

It kinda works on the link below. Dropdowns are to the right of toggle element.

(Dropdowns are on the second tab)

http://plnkr.co/edit/gkbEkv86dTTvWZCAeUp0?p=preview

However, what I'm actually trying to do is to have the toggle element float to the right (to the end of the heading), like this:

http://plnkr.co/edit/0qMNLgabRrfAC2Evw1ri?p=preview

But as you can see, the dropdowns are still presented at the same place as before. It ignores the fact that the toggle element now is to the right.

I'm using Bootstrap along with Angular UI directives. However, I'm pretty certain that the problem is CSS relative.

Once I actually found out that this is the problem, what I've tried is to set relative to elements and reposition the dropdown with
right: 0
but it didn't work.

Does anybody know how can I have the toggle element of a dropdown floating to the right and then show the dropdown menu to consider the float?

Thanks.

Answer Source
.panel-heading > .dropdown {
   position: static;
}

...applied to your second plunkr will do the trick.

As a side note, you shouldn't apply position:relative inline to .panel-headings. You should do it only once, via CSS. If you want to make sure you don't affect the rest of the project, prefix your selector with a specific id. In your case, #right-box seems fit for the job:

#right-box .panel-heading { position: relative; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download