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

Question

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.

Possible duplicate of [Angular2 Material Dialog css, dialog size](https://stackoverflow.com/questions/40595276/angular2-material-dialog-css-dialog-size) — mohsen kamrani, Sep 18 '17 at 05:11

score 76 · Answer 1 · edited Jun 20 '20 at 09:12

76

From the official documentation:

Styling overlay components

Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.

You can override the default dialog container styles by adding a css class in your global styles.css. For example:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

After that, you'll need to providies you css class as a panelClass parameter to your dialog:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

Read this official documentation for more information.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 18 '17 at 05:13

Faisal

31,390
9
89
101

Thank you so much. It really worked and saved my day. – umar faraz Aug 13 '18 at 13:32
@umarfaraz glad to help brother :) – Faisal Aug 13 '18 at 13:40
Does it only work in style.scss? can it work in component scss file? – Guerrilla Sep 30 '18 at 16:25
3

For me it only worked after adding ::ng-deep like this: ::ng-deep div.my-panel .mat-dialog-container { ... } – yglodt Dec 28 '18 at 14:57
4

It is very important that you apply these styles to `styles.css`. Because I tried to apply them on the component's style and it didn't work at all. So always make sure you put this piece of code inside your global styles to avoid hours of frustrations. – AllJs Dec 25 '19 at 12:25
1

if you apply `encapsulation: ViewEncapsulation.None` in `your-dialogue-component.ts` then you can move the definition of your dialogue `panelClass` styles from `styles.css` to `your-dialogue.component.css` – Alex Nazarevych May 13 '20 at 07:55
@AlexNazarevych setting `encapsulation: ViewEncapsulation.None` will affect all the dialogs since the styles will not be encapsulated. – Faisal May 13 '20 at 08:58

Alisson Reinaldo Silva · Answer 2 · 2020-07-11T18:04:51.307

19

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.

edited Jul 11 '20 at 18:04

answered Jul 03 '20 at 09:06

Alisson Reinaldo Silva

8,453
4
54
76

2

I like this better because I can keep my styles with the dialog component which can be reused rather than adding a lot of content to styles.css – Helmut Granda Oct 20 '21 at 20:30
@Alisson Will this leak css styles into other dialog components, as we don't use :host ::ng-deep – PrathapG Jun 02 '22 at 09:21

score 7 · Answer 3 · answered Sep 18 '17 at 15:28

7

You can change width/height of the modal by setting the values in the open() method, something like the following:

this.dialog.open(MyDialogComponent, {
  height: '300px'
  width: '400px'
});

answered Sep 18 '17 at 15:28

Sonicd300

1,804
1
15
22

score 1 · Answer 4 · edited Dec 04 '17 at 12:49

1

    const dialogRef = this.dialog.open(WorkModalComponent, {
       width: '1200px',
       data: workObj,
       panelClass: 'my-dialog-container-class' // Replace with your actual dialog container class
    });

add the panelClass to your Dialog and add your CSS style to this class.

edited Dec 04 '17 at 12:49

Ankit Kapoor

1,477
10
17

answered Dec 04 '17 at 12:14

fateme noruzi

11
1

score 0 · Answer 5 · edited Sep 01 '20 at 06:02

0

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';

edited Sep 01 '20 at 06:02

Arghya Sadhu

35,183
9
62
80

answered Sep 01 '20 at 02:50

Aditya Goyal

1

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

5 Answers5

Linked