Overriding Angular Material Size and Styling of md-dialog-container

user_7107927 0
Viewed 56524

I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container? which is hidden. Only added when I click the modal and when you open the chrome dev tools you can see the md-dialog-container appearing. Do include how to override the rest of the styling.

Much appreciate with some help. Thanks.

angular-material2 angular-material angular
6 Answers

There is no need to add global styles.

You can add this to your own component style:

::ng-deep .my-custom-dialog-class {
  mat-dialog-container {
    padding: 0;
  }
}

Make sure there is no "." (dot class selector) for mat-dialog-container because you must use the html tag selector.

Then when you open the dialog, add your class in panelClass property:

this.dialog.open(MyDialogComponent, {
  data: {},
  panelClass: 'my-custom-dialog-class'
});

By using a custom panelClass, this ensures only dialogs opened with that class will be affected, even using ng::deep.

user_22635070

If all that wouldn't work, you can try

const e: HTMLElement = document.getElementById(this.element.nativeElement.parentElement.id);
e.style.display = 'flex';

e.style.padding = '0';
user_75186370

I was able to get this to work with Angular 13 following Faisal's solution however I had to add: encapsulation: ViewEncapsulation.None to my @Component declaration that is being used as a dialog:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-progress-spinner-dialog',
  templateUrl: './progress-spinner-dialog.component.html',
  styleUrls: ['./progress-spinner-dialog.component.css'],
  // this needed to override the mat-dialog-container CSS class
  encapsulation: ViewEncapsulation.None
})

Without this reference to ViewEncapsulation.None I was not able to get the CSS override to work. I found this great hint here: Learn Angular 11 MatDialog Basics

user_60509870
Related