Bootstrap: dropdown-menu-right no longer works

[froodley]

I have reproduced the problem with .dropdown-menu-right under 4.0beta here:

(Issue is the dropdown menu does not go to {right: 0;left: auto}, so basically the class does nothing, menu is left aligned, at this point for some people)

https://jsbin.com/qemicohayu/edit?html,output

[froodley]

ref: https://github.com/twbs/bootstrap/issues/23308

[froodley]

I am able to work around it in my code by elevating this snippet from /_navbar.scss:

.dropdown-menu-right {
            right: 0;
            left: auto; // Reset the default from `.dropdown-menu`
          }

... to a global level in my scss

[dmolineus]

I struggled with it recently as well. It only works if a navbar-toggleable-* class is used. Not sure if it's the way it should be.

[Johann-S]

The preview of your code as expired in JSBin maybe can you create a Codepen to see what's your bug

[froodley]

Preview is expired? Not sure what you mean. I can access it fine from an incognito window.

[froodley]

Here is the same as a codepen:

https://codepen.io/froodley/pen/MvONjW

[Johann-S]

thanks @froodley 👍

[kofh]

this is similar to #23429 , which I believe to be a result of https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js#L269 this part of dropdown.js. I cannot understand the thinking behind the referenced function, can someone please clarify?

[Johann-S]

We made the choice to disable Popper.js style for Dropdowns in navbar here : https://github.com/twbs/bootstrap/pull/22782
but they are use cases we didn't handled

[kofh]

I don't understand then how we are meant to have right-aligned dropdowns inside of navbars? Is this a feature we are meant to be implementing ourselves? I feel as though this is an important part of many navigations.

[Johann-S]

As it wrote in our documentation when you use Dropdown in a navbar you should have a .navbar-nav see :
https://getbootstrap.com/docs/4.0/components/navbar/

So in your CodePen add .navbar-nav to the UL inside the navbar and everything is fine 👍

[JavanXD]

Then you should change the documentation in https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment because there is written

Add .dropdown-menu-right to a .dropdown-menuto right align the dropdown menu.

Allowing .dropdown-menu-right only in .navbar-nav is not a good practise because it is often used outside .navbar-nav.

Still a issue in my eyes

[Johann-S]

That's a bit different here if you want to use .dropdown-menu-right in a navbar you must add .navbar-nav has it written in our docs.
And if you're not in a navbar you can simply add .dropdown-menu-right as it written in our docs too.

[kofh]

I think @JavanXD is referring to the fact that although this is in the code, it is not textually called out as being an important detail. I myself was not previously using the nav because I only had one item in the .navbar, the dropdown. So I think calling out the importance of using the .navbar-nav in order to re-enable the functionality of .dropdown-menu-right is important.

[froodley]

I agree, was not clear from the docs, but thanks for the fix!

[backcopy]

The docs need to provide more clarification about drop down button placement inside a navbar, especially if you want to have the dropdown on the right side of the page inside a navbar.