Working with mat dialog and bootstrap sticky top class

Question

The issue I'm facing is that every time I click to delete an entry it should appear a mat dialog and have everything else in the background greyed out, however, the behavior I'm facing is that once I try to delete an entry the dialog appears but the sticky top, in this case the header, is not greyed out. The log component is living in the details component so when dialog appears everything besides the sticky is greyed out. Code is seen below. Anybody know how to deal with this or why this behavior?

Using: Angular Material version 12.2.13. Bootstrap version 5.1.

log.component.html

<div class="row mx-auto">
      <table mat-table [dataSource]="LogSource" class="mat-elevation-z8 orange">
        
        //...other tables are go here

        <ng-container matColumnDef="Delete">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element" (click)="deleteEntry(12)">
            <button class="btn btn-danger">
              <i class="bi bi-x"></i>
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: displayColumns"
        ></tr>
      </table>

log.component.ts

import { Component, OnInit} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { LogMessageComponent } from 'src/app/dialogs/log-message/log-message.component';

@Component({
  selector: 'app-log',
  templateUrl: './log.component.html',
  styleUrls: ['./log.component.scss'],
})
export class LogComponent implements OnInit {

  displayContactLogColumns = [
    'CreatedDateTime',
    'CreatedByUser',
    'ContactType',
    'Study',
    'Outcome',
    'OutcomeDetails',
    'Notes',
    'Delete',
  ];
  LogSource: any[];
  errorMessage: string;

  constructor(
    public dialog: MatDialog
  ) {
    this.LogSource = [];
    this.errorMessage = ''
  }

  deleteLog(Id: number) {

    if (deleteLog !== -1) {
      //I'm forcing a delete for now
    } else {
      const errorMessage = `Could not find log with id of ${Id}`;
      this.dialog.open(LogMessageComponent);

      throw new Error(errorMessage);
    }
  }
}

sticky.component.ts This is where the sticky resides.

<section id="details" class="container">
  <!-- SUMMARY -->
  <header id="demo" class="mt-3 sticky-top bg-body">
    <div class="row">
      //Some code goes here
    </div>
  </header>
</section>

Answer 1

I coudn't test it before, but maybe you can solve your problem if you make a css class which "grey" the whole screen, for instance:

.hideFullScreen {
  background:grey;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

and then you make a material dialog configuration for your dialog and add that 'hideFullScreen' class css to it:

if (deleteContact !== -1) {
      //I'm forcing a delete for now
    } else {
      const errorMessage = `Could not find log with id of ${Id}`;
      const dialogConfig = new MatDialogConfig();
      dialogConfig.panelClass = 'hideFullScreen';      
      this.dialog.open( ContactLogMessageComponent, dialogConfig );

      throw new Error(errorMessage);
    }
  }