v4 - Dropdown should adjust its placement to ensure it stays within viewport

[TheZoker]

With the new version, dropdown content does not reconize, when the element is out of view and does not change the align:

[cvrebert]

Pretty sure the old version didn't do that either.

[TheZoker]

Jup it did:

[hnrch02]

.dropdown-menu-right is probably what you are looking for, this behavior hasn't changed from v3.

[TheZoker]

@hnrch02 Nope did not add that class to the dropdown in v3:

[hnrch02]

Can you post your v4 test as a JS Bin?

[kkirsche]

@hnrch02 seems to have to do with being in a navbar I believe

V3 JSBin:
http://jsbin.com/rolitoqewi/edit?html,output

[cvrebert]

Ah, we used to special-case dropdowns within .navbar-right, but that class is gone in v4.
I do think it would be better to make the feature not navbar-specific. Should be feasible now that we're using Tether (see e.g. http://github.hubspot.com/drop/docs/welcome/ ).

[hnrch02]

Well, .navbar-right was replaced by .pull-right (for now, as @mdo said in Slack).

[lallmon]

A dropdown menu pulled right on a fluid navbar is probably one of the most common use cases.

Perhaps the dropdown menu should default to aligning its right side to the left side of the dropdown element, and the opposite be the special case.

[fat]

yeah i'd rather us solve this particular use case in css since so easy/common - @mdo what are your thoughts?

we could move dropdown onto tether but makes dropdown plugin a bit more complicated

[cvrebert]

we could move dropdown onto tether but makes dropdown plugin a bit more complicated

IMHO, I think it's worth doing that. Way more robust.

[fat]

yeah fair enough

[davidklebanoff]

The suggestion of a new placement library here: #19673 - seems to have better support for flipping than Tether.

[joviczarko]

Until this is solved (after 1 year of talking about it, here is a quick solution)

.dropdown-menu {
right: 0;
left: initial;
}

And just add .navbar in front of the selector if you do not need this project wide...

[0wczar]

@joviczarko in v4 alpha6 not working. Can you please add demo via JSBin?

[erslater]

This works in v4 alpha6: <div class="dropdown-menu" style="left:initial;right:0;" ...

[Johann-S]

Closed and fixed by #22444