-1

I am facing this issue. I am trying to open a modal dialog, in angular material. Here is the code:

html:

<button  class="btn-image" (click)="openDialog(element.batchId)">

.ts file:

   constructor(private matDialog: MatDialog) { }

   openDialog(batchId:number) {
     this.batchId = batchId
     this.matDialog.open(WavedetailsComponent, {
     height: '75%',
     width: '75',
     panelClass: 'full-screen-modal',
     data: { batchId:batchId}
   })

Problem is, the dialog appears below current screen, and not on top of current screen. can anybody tell me, what is the mistake?

santubangalore
  • 796
  • 1
  • 12
  • 25

1 Answers1

-1

put this in your styles.css or styles.css file

.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}
Luigi Woodhouse
  • 332
  • 3
  • 14