I am encountering an issue where, upon clicking to delete an entry, a mat dialog should appear with everything else in the background greyed out. However, the problem I am facing is that when I attempt to delete an entry, the dialog appears but the sticky top (in this case, the header) remains unaffected by the greying out. The log component is situated within the details component, so when the dialog pops up, everything except the sticky header is greyed out. Any insights on how to address this issue or why this behavior is occurring?
Tools being used: Angular Material version 12.2.13 and Bootstrap version 5.1.
log.component.html
<div class="row mx-auto">
<table mat-table [dataSource]="LogSource" class="mat-elevation-z8 orange">
// ...other table content goes 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 enforcing 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 section is located.
<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>