[Bug] Angular 13 + Bootstrap 5 - Modal z-index

[mrseanr]

Version

1.5

Reproduction link

https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular

Operating System

Mac OS Monterey

Device

2021 Macbook Pro (M1 Pro Chipset)

Browser & Version

Chrome v. 101.0.4951.41

Steps to reproduce

1. download zip
2. extract to folder
3. open vs code
4. npm install
5. add the following to a module (app.module is fine)

6. import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   ...
   imports: [
   ... 
   NgbModule,
   ...
   ],

7. Enter the following on a component.html

   <button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>
   <ng-template #mymodal let-modal>
   <div class="modal-header">
   <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
   <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
     <span aria-hidden="true">×</span>
   </button>
   </div>
   <div class="modal-body">
   This is example from Tutsmake.com
   </div>
   <div class="modal-footer">
   <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
   </div>
   </ng-template>

8. Use the necessary code from the following in the component.ts

   
   import { Component } from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'appBootstrap';

closeResult: string = '';

/*------------------------------------------

Created constructor

--------------------------------------------*/ constructor(private modalService: NgbModal) {}

/**

• Write code on Method

• @return response() */ open(content:any) { this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => { this.closeResult = Closed with: ${result}; }, (reason) => { this.closeResult = Dismissed ${this.getDismissReason(reason)}; }); }

  /**

• Write code on Method
• @return response() */ private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return with: ${reason}; } } }

  
  9. ng s
  10. open chrome
  11. browse to "http://localhost:4200"
  12. navigate to the component where the HTML was inserted
  13. click the 'Open My Modal' button
  14. the z-index of the modal-backdrop is 1055, which puts the backdrop in front of the modal.
  <img width="2054" alt="Screen Shot 2022-05-02 at 3 08 46 PM" src="https://user-images.githubusercontent.com/17507370/166321426-b9234f2f-b3d3-4606-a727-2281a5d314b0.png">

15. using the browser console, changing the z-index to 1050 shows the proper display

What is expected?

the modal backdrop is positioned behind the modal content

What is actually happening?

the modal content is effectively disabled due to the z-index

---

Solution

I added the following to the _modals.scss, which fixes the ngb-modal issue, but it breaks the OOB Paper Dashboard modals on the components/notifications pages

.modal-backdrop {
    z-index: 1050 !important;
}

Since this addition breaks the OOB modals, what is the better solution?

Additional comments