NGX-Bootstrap Navbar dropdown not working

Question

So Im trying to add a dropdown to my navigation bar. I modified the example of a dropdown on ngx-bootstrap to match a dropdown from bootstraps navbar examples but its still not working correctly. When i click the dropdown it not only shows the dropdown items but it also expands the entire navigation bar like below.

Navigation-bar.html

<nav class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Control Center</a>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="/login" *ngIf="!isAuthenticated">Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/admin" *ngIf="isAuthenticated">Admin</a>
    </li>
    <li class="nav-item" dropdown>
        <a id="button-basic" dropdownToggle type class="nav-link dropdown-toggle"
                aria-controls="dropdown-basic">
          Button dropdown <span class="caret"></span>
    </a>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
            role="menu" aria-labelledby="button-basic">
          <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
          <li class="divider dropdown-divider"></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
          </li>
        </ul>
      </li>


    <li class="nav-item">
      <a class="nav-link" *ngIf="isAuthenticated" (click)="onLogout()"
        >Logout</a
      >
    </li>
  </ul>
</nav>

Softwares:

• Latest angular
• Bootstrap 4
• Ngx-bootstrap

Answer 1

This might be caused by some other styling being applied to the dropdown. But if you want to fix it without figuring out the root issue you could try

<li class="nav-item" dropdown container="body">

This will add the dropdown to the root of your html instead of at the location where it is defined. This way it be less likely to affect the layout of your page.

I would however suggest to use the browsers element inspector and see what exactly is being applied to your dropdowns styling-wise.