CODEWITHSUNDEEP
bootstrap-4twitter-bootstrap-4
temuri
temuri

Reputation: 2807

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

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!

Upvotes: 6

Views: 3088

Answers (3)

Grzegorz Jasiński
Grzegorz Jasiński

Reputation: 115

Answers in this post didn't help me. I solved it by placing placement="bottom-right".

<div ngbDropdown class="d-inline-block float-right" placement="bottom-right">
    <button class="btn btn-secondary dropleft" id="grade-dropdown" ngbDropdownToggle>
         Button
    </button>
    <div ngbDropdownMenu class="dropdown-menu">
        ...
    </div>
</div>

Upvotes: 0

Strayobject
Strayobject

Reputation: 662

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;
}

Upvotes: 2

TidyDev
TidyDev

Reputation: 3668

Here's a rather crude but fully working solution to your problem.

.dropdown-menu-right{
    left: -85px;
}

Edit: I'd put it in a media query so that the drop down doesn't look off on mobile.

@media screen and (min-width: 991px) {
  .dropdown-menu-right{
    left: -85px;
  }
}

Upvotes: 0

Related Questions