angular material dialog is not responsive
you can try by adding margin: 0 auto;
to your dialog setting:
let dialogBoxSettings = {
height: '300px',
width: '500px',
margin: '0 auto',
disableClose: true,
hasBackdrop: true,
data: mission.config
};
I was using low utility classes in my case (tailwind), here's the solution I found:
let dialogRef = this.dialog.open(LiveEventModalComponent, {
panelClass: ['md:w-3/5', 'w-full'],
maxHeight: '85vh',
data: {},
});
To achieve responsiveness, we can use panelClass in MatDialogconfig
Add the following in global style
.dialog-responsive {
width: 40%;
}
@media only screen and (max-width: 760px) {
.dialog-responsive {
width: 100%;
}
}
And include this class in your config where you want to open dialog
let config: MatDialogConfig = {
panelClass: "dialog-responsive"
}
let dialogRef = this.dialog.open(InviteStudentComponent, config);