37

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.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
codeRamen
  • 487
  • 2
  • 6
  • 12
  • 1
    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

6 Answers6

88

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.

Community
  • 1
  • 1
FAISAL
  • 33,618
  • 10
  • 97
  • 105
  • 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
28

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.

Alisson Reinaldo Silva
  • 10,009
  • 5
  • 65
  • 83
  • 4
    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
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'
});
Sonicd300
  • 1,950
  • 1
  • 16
  • 22
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.

Ankit Kapoor
  • 1,615
  • 12
  • 18
fateme noruzi
  • 39
  • 2
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';
Arghya Sadhu
  • 41,002
  • 9
  • 78
  • 107
Aditya Goyal
  • 1
0

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

J.Gentsch
  • 19
  • 2