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

[temuri416]

Hi,

The markup:

<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.

Demo:
https://codepen.io/tmrczk/pen/pWLXbO

StackOverflow question:
https://stackoverflow.com/questions/46651162/bootstrap-4-dropdown-menu-is-not-right-aligned-when-inside-nav-navbar

Loaded resources (as per current official docs):
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js

Browsers: latest Chrome, Firefox
OS: Win7

Thanks!

[morrissey-ingenious]

You should be using a navbar-nav style drop down instead of a button group

[temuri416]

Thanks!

That improved it, but dropdown is still not aligned properly with the right edge of the button:

You should be using a navbar-nav

I looked everywhere in the docs, but could not find this. Where can I read about it?

[cnelson-ma]

This is discussed here: https://getbootstrap.com/docs/4.0/components/navbar/#nav

[temuri416]

Yes, that's where I got the sample code from.

Hopefully, the dropdown alignment bug will be resolved.

[morrissey-ingenious]

Here is an example of how you do it correctly.

https://codepen.io/morrissey-ingenious/pen/mBLyov

[XhmikosR]

Closing since this is a usage issue.

[polyglotinc]

The issue remains because example of how to do it "correctly" doesn't work for my situation.
I have other items in a collapsible navbar that are not in a "ul"...the button group approach works fine except for dropdown menu not being right aligned.
SO, there is a need to fix this bug rather than sweep it under the rug.

[morrissey-ingenious]

@polyglotinc can you please provide your use case on codepen.io or similar site

[polyglotinc]

I dont know how to set those up, but if in the one @temuri416 did, you replace the html and css, copy/pasting the following, you can see the problems Im having with both approaches.
Uncomment the UL to see the navbar style,
or alternatively uncomment the div for the button group style.
(both commented out is my existing code that I dont want to break)
(ps, the css is not strictly needed for this example)

<header class="fixed-top">
      <div class="container">
        <nav class="navbar navbar-toggleable-md navbar-light" role="navigation" style="background-color: rgb(246, 246, 243);">
          <button class="navbar-toggler navbar-toggler-right hidden-lg-up collapsed" data-target="#mainNavbarCollapse" data-toggle="collapse" type="button" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
          </button>

          <a class="navbar-brand mx-auto" title="brand-X" ng-reflect-router-link="/" href="#">
            <span class="xing xinger">brand-X</span>
          </a>

    <!-- un-comment this UL for major broken approach -->
    <!-- ul class="navbar-nav">
      <li class="nav-item dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">XXX</button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul-->

<!-- un-comment this div for minor broken approach -->
<!-- div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    XXX
  </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 class="navbar-collapse justify-content-end collapse" id="mainNavbarCollapse">
            <ul class="navbar-nav my-2 my-lg-0">
              <div class="dropdown-divider"></div>
              <span class="navbar-text">User: [email protected]</span>
              <span class="navbar-text">Profile: joeblow</span>  
            </ul>
          </div>
        </nav>
        <p class="top-shadow" style="display: block; opacity: 3;">&nbsp;</p>
  </div>
</header>

<!-- page content scrolls under navbar -->
<div style="height:85px"></div>
<h1>content</h1><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><h1>more  content</h1><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><h1>some content</h1><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><h1>more  content</h1><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><h1>some content</h1><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p><p>blah blah blah blah blah</p>

.xing {
    font: bold 100% cursive !important;
    line-height:1;
    color: #004000 !important;
    text-transform: none;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.25);
    padding: 0 .3rem;
}
.xing.xinger {
    font-size:xx-large !important;
}
@media (max-width: 400px) {
    .xing.xinger {
        font-size:large !important;
    }
}
.top-shadow {
    margin-top: -2px;
    background-color: #f6f6f3;
    height: 8px;
    -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
            box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
}

[ericksonsv]

Use .container-fuid after nav tags

[Hossain5]

Bootstrap 4: Dropdown menu is going off to the right of the screen
https://divscode.com

[Hossain5]

https://divscode.com