Angular Bootstrap dynamic dropdown menu overlaping

  angular, angular-ui-bootstrap

I am trying to develop a dynamic menu with angular and bootstrap for angular. Specifically, I have been able to get the menus and submenus to display on the page, but the submenus are drawn on top of each other.

enter image description here

To do this development I have started from the examples on the page "Angular for Bootstrap", adding * ngFor https://ng-bootstrap.github.io/stackblitzes/dropdown/basic/stackblitz.html to make it dynamic but I have run into the problem of overlapping the buttons. Could someone guide me on how I could fix the problem?

<div class="btn-group mr-3" *ngFor="let appMenu of appMenus">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown" >
    <button class="btn btn-outline-primary fontSize2rem" ngbDropdownToggle>{{ appMenu.appMenuName }}</button>
    <div class="dropdown-menu" *ngFor="let appMenuItem of appMenu.appMenuItemList" ngbDropdownMenu>
      <button ngbDropdownItem class="fontSize2rem" [routerLink]="appMenuItem.path">{{ appMenuItem.appMenuItemName }}</button>
    </div>
  </div>
</div>

Thank you very much in advance.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.