Bootstrap 4: Dropdown menu is not right-aligned when inside nav.navbar

Question

Latest Boostrap 4 and popper.js as of time of writing are loaded from CDN.

Codepen here.

Problem.

My dropdown code:

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">This dropdown's menu is right-aligned</button>
    <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</div>

I am positioning it inside <nav class="navbar"> and it is flushed right:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="btn-group ml-auto">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Welcome</button>
        <div class="dropdown-menu dropdown-menu-right">
            <button class="dropdown-item" type="button">Action</button>
            <button class="dropdown-item" type="button">Another action</button>
            <button class="dropdown-item" type="button">Something else here</button>
        </div>
    </div>
  </div>
</nav>

The problem is that when you click "Welcome", the drop-down goes outside the right edge of the screen, despite dropdown-menu-right class on it.

Solution proposed here does not work ({margin:0} does not help).

Question.

How do I make sure that drop down does not go outside the right edge of the screen?

Thanks!

Answer 1

I have not worked that one either. However, a workaround that I'm using and so far fixes the problem everywhere is:

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