Query asked by user
I am using a dynamic MatDialog for confirmations and it opens displaying the message properly when the button clicked, except for the fact that every time any of the buttons that trigger the dialog is clicked, the cdk-overly-container
appears in the index, below app-root
and shifts app-root
upwards permantly – even after the dialog was closed.
service class:
@Injectable({
providedIn: 'root'
})
export class DialogService {
constructor(private dialog: MatDialog) { }
confirmDialog(data: ConfirmDialogData): Observable<boolean> {
return this.dialog
.open(ConfirmationDialogComponent, {
data,
width: '400px'
})
.afterClosed()
}
}
component:
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(private dialogService: DialogService,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) { }
}
styles.css
html,
body {
margin: 0;
padding: 0;
height: 100%;
box-sizing: border-box;
}
body {font-family: 'Poppins', sans-serif;}
a,
a:visited,
a:hover {
text-decoration: none;
color: inherit;
}
.cdk-overlay-container { position: fixed; }
I have read a lot discussions on this issue, regarding z-index
and so on, aber could not fix the problem. I am using Angular 13 and mostly Google Chrome. Can anyone relate to this or kindly help to fix this?
Answer we found from sources
I could fix the problem by applying the following in the styles.css file:
.mat-dialog-content {
max-height: 100% !important;
}
I can’t explain why that was necessary. But the dialog stopped shifting the content up when triggered. Just in case someone deals with the same problem. Maybe someone could explain what in my code caused that or why this css element was necessary.
Answered By – Murilo de Melo Reis
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0