Angular overlay not displaying properly with a bootstrap sidebar template

Question

I tried to add an overlay to a component when i click a button like this example :
https://stackblitz.com/edit/overlay-demo-fv3bwm?file=app/app.component.ts
but after adding it to my component the overlay elements ( in my case just a textarea element ) is displayed under my rendered sidebar template and not over the rendered router-outlet component.

this is my sidebar template:

<div class="d-flex" id="wrapper">
  <!-- Sidebar -->
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading" > <a routerLink="">
      <img style="width: 200px;" src="../../../assets/images/logo">
      <br> <h4>App</h4></a></div>
    <div class="list-group">
      <a routerLink="requirements" routerLinkActive="active" 
        class="list-group-item list-group-item-action bg-light">Component1</a>
      <a routerLink="dataset" routerLinkActive="active"
        class="list-group-item list-group-item-action bg-light">Comonent2</a>
      <a routerLink="dag" routerLinkActive="active"
        class="list-group-item list-group-item-action bg-light">Comonent3</a>
      <a routerLink="tasks" routerLinkActive="active" 
        class="list-group-item list-group-item-action bg-light">Comonent4</a>
    </div>
  </div>
  <!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper">
    <nav class="navbar navbar-expand navbar-light bg-light border-bottom">
      <button class="btn btn-primary" id="menu-toggle"><i class="bi-arrow-right"></i>Toggle Menu</button>

      <div class="collapse navbar-collapse " id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item text-center" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item text-center text-secondary"  (click)="onLogout()">Logout</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </div>
  <!-- /#page-content-wrapper -->
</div>

I have encountered a similar issue when I tried to split the sidebar from my router-outlet by removing the router-outlet from my sidebar component and adding it to app component :

<app-sidebar></app-sidebar>
<router-outlet><router-outlet>

but ended up keeping the side bar template above (with the router-outlet tag) and just keeping the app-sidebar tag in my app component:

<app-sidebar></app-sidebar>

In this image, the red mark is where I wanted the overlay to be shown and the black mark is where it actually is.
Inspect overlay

Edit:

This is the issue reproduced in a stackblitz project (the overlay button is in part 1 nav link ):
https://stackblitz.com/edit/angular-crud-deborahk-axtfg7?file=src%2Fapp%2Fapp.module.ts

I also figured that the overlay is not working, its not only a sidebar problem I can click on the overlay button and it keeps creating the templates over and over again.
Here you can see my sidebar where i marked the black cross and how the overlay is being displayed overlay output

*Note: the stackblitz example is on angular 9 while I'm working with angular 11*

In the stackblitz demo the overlay is displaying properly(on top of main page). — Vimal Patel
yes that is the example I wanted to reproduce in my local project but in the stackblitz link it's implemented in app component directly whereas in my local project the overlay is implemented in a componenet with the sidebar template I provided above and in the following components tree : [mainComponent]->[sideBarComponent, myActualComponentWithOverlay], ('->': a parent of) I'm almost certain this is happening because of the way I implemented the sidebar:if I move the "Page Content" part of the template to the parent component : mainComponent , it will cause the same problem — wazzup
I tried the overlay within the sidebar stll not able to reproduce Link — Vimal Patel
Yes but there is no routing in the link you provided you are not using router-outlet like in my template. — wazzup
Plus the stackblitz example is on version 9, while I'm using angular 11, i'm starting to think it's not only about the sidebar because even when the overlay is triggered it doesnt function properly (see edits). — wazzup

Vimal Patel Vimal Patel · Accepted Answer · 2020-12-22T14:52:59

The problem seems be bootstrap/material related. You have added both bootstrap and material package and you have added below css in style.css.

@import '~bootstrap/dist/css/bootstrap.min.css';

However you have not included material css anywhere in your project. Add below line and your issue will be resolved.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Note:- please include the css file as per your theme.

Angular overlay not displaying properly with a bootstrap sidebar template

1 Answers