Angular2 Material Dialog css, dialog size

Question

Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

I'd like to change the looking and feel about the angular2 material's dialog. For example, to change the fixed size of the popup container and make it scrollable, change the background color, so forth. What's the best way to do so? Is there a css that I can play with?

score 80 · Answer 1 · edited Jun 18 '19 at 22:24

There are two ways which we can use to change size of your MatDialog component in angular material

1) From Outside Component Which Call Dialog Component

import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';


dialogRef: MatDialogRef <any> ;

constructor(public dialog: MatDialog) { }

openDialog() {
        this.dialogRef = this.dialog.open(TestTemplateComponent, {
            height: '40%',
            width: '60%'
        });
        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

2) From Inside Dialog Component. dynamically change its size

import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';

constructor(public dialogRef: MatDialogRef<any>) { }

 ngOnInit() {
        this.dialogRef.updateSize('80%', '80%');
    }

use updateSize() in any function in dialog component. it will change dialog size automatically.

for more information check this link https://material.angular.io/components/component/dialog

Is there any way to find the current size from inside the dialog component? — Lahiru Chandima, Sep 28 '18 at 02:45

Alexander Taylor · Answer 2 · 2017-10-20T20:39:39.177

67

Content in md-dialog-content is automatically scrollable.

You can manually set the size in the call to MdDialog.open

let dialogRef = dialog.open(MyComponent, {
  height: '400px',
  width: '600px',
});

Further documentation / examples for scrolling and sizing: https://material.angular.io/components/dialog/overview

Some colors should be determined by your theme. See here for theming docs: https://material.angular.io/guide/theming

If you want to override colors and such, use Elmer's technique of just adding the appropriate css.

Note that you must have the HTML 5 <!DOCTYPE html> on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351 )

edited Oct 20 '17 at 20:39

answered Jan 26 '17 at 02:20

Alexander Taylor

16,574
14
62
83

2

What if I want to add more than height and width? Like border-radius, or background. Where do I put this css? – Tenzolinho Feb 27 '19 at 08:25
You can add relevant css like make use of `panelClass` – TheViralGriffin Dec 03 '20 at 20:28

Kostas Siabanis · Answer 3 · 2018-09-06T07:03:15.217

43

With current version of Angular Material (6.4.7) you can use a custom class:

let dialogRef = dialog.open(UserProfileComponent, {
  panelClass: 'my-class'
});

Now put your class somewhere global (haven't been able to make this work elsewhere), e.g. in styles.css:

.my-class .mat-dialog-container{
  height: 400px;
  width: 600px;
  border-radius: 10px;
  background: lightcyan;
  color: #039be5;
}

Done!

edited Sep 06 '18 at 07:03

answered Sep 06 '18 at 06:53

Kostas Siabanis

2,989
2
20
22

2

This is very handy solution if you want to change certain dialog without affecting every dialog in your project. – mxr7350 Oct 25 '18 at 13:30
This is the method I use in Angular 7 + Material 7. I have a followup question (Will make it an actual question if I can't find an answer anywhere): How can I set a maximum dialog width, IF the user is using a wide screen (monitor), but NOT if they're using a smaller viewport (a phone or portrait tablet, for example)? – Ade Jan 04 '19 at 20:52
@Ade You would have to use media [breakpoints](https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints) for that – Kostas Siabanis Jan 05 '19 at 17:39
This is a much nicer solution than the top answer as you can define a lot more properties than just height as well as you can use SCSS variables. – SDekov May 14 '22 at 14:05

score 20 · Accepted Answer · edited May 26 '21 at 17:33

20

You can inspect the dialog element with dev tools and see what classes are applied on mdDialog.

For example, .md-dialog-container is the main classe of the MDDialog and has padding: 24px

you can create a custom CSS to overwrite whatever you want

.md-dialog-container {
      background-color: #000;
      width: 250px;
      height: 250px
}

In my opinion this is not a good option and probably goes against Material guide but since it doesn't have all features it has in its previous version, you should do what you think is best for you.

edited May 26 '21 at 17:33

EJoshuaS - Stand with Ukraine

11,977
56
49
78

answered Nov 22 '16 at 15:24

Elmer Dantas

4,649
5
30
36

Thanks, I ended up adding a DIV and style on that. – ethan Nov 24 '16 at 03:55
1

This is not working with this dialog - https://material.angular.io/components/component/dialog .. changes are not applied – vanillaSugar Apr 13 '17 at 10:55
@bukajcihaj as far as I know the css class of angular material has changed a little, so, as I said in my answer, use dev tools to see what classes are applied to the dialog and overtwrite them. You can also look at the answer below. – Elmer Dantas Apr 13 '17 at 11:01
Good direction, but I'm wondering now *where* to put the styling for a dialog called programatically. If I put in the component I'm populating the dialog with, it does no good. – ThePartyTurtle Aug 06 '17 at 20:48
1

@Elmer Dantas, thanks, that could work for now. I was interested in styling the modal just for that component, rather than all modals. I guess the only way to do that now is with the MdDialogConfig options, although it doesn't include padding yet. – ThePartyTurtle Aug 07 '17 at 16:43
@ThePartyTurtle you can create a specific css rule just for this component...but I don't get one thing: why the component's css is not working? – Elmer Dantas Aug 07 '17 at 18:34
1

Recently ran into a similar problem where I couldn't get a specific material class to style (even with specificity and using !important). Some of the material classes has ViewRule.Blocked (or something like that) which basically encapsulates the styles to that component so it ignores any other styling. The trick is to use `::ng-deep`. for example, `::ng-deep .mat-sidenav-container { height: auto; }`. Still trying to understand this but this solution worked for me. – mwilson Aug 25 '17 at 03:17
where should I place the md-dialog-container class? and where should I use it? – userx Apr 20 '18 at 09:25
@FurqanShakir you should check dev tools if the class is still the same..the answer/angular has changed since the question was posted – Elmer Dantas Apr 21 '18 at 01:30
@mwilson`::ng-deep .[cdk|md class] { ... }` worked for me - great find - wish this wasn't buried in just a comment. Thanks! – challamzinniagroup Jan 01 '20 at 15:44
Be aware that if you are adding this kind of `::ng-deep` rule in your component - it will apply GLOBAL styling, meaning that if you do `::ng-deep` on class that exist on all of the angular modals - all of those modals will receive that styling as soon as you launch that component for the first time. – Max Yari Jun 24 '20 at 12:50

score 10 · Answer 5 · edited Jul 26 '19 at 05:17

10

sharing the latest on mat-dialog two ways of achieving this... 1) either you set the width and height during the open e.g.

let dialogRef = dialog.open(NwasNtdSelectorComponent, {
    data: {
        title: "NWAS NTD"
    },
    width: '600px',
    height: '600px',
    panelClass: 'epsSelectorPanel'
});

or 2) use the panelClass and style it accordingly.

1) is easiest but 2) is better and more configurable.

edited Jul 26 '19 at 05:17

Paul Rooney

20,879
9
40
61

answered Mar 09 '18 at 01:40

erickyi2006

216
2
8

@PrasadShinde you have to put the CSS class in your global Styles.css file (or presumably .scss if that's what you're using). – Ade Jan 04 '19 at 20:54
@PrasadShinde - no worries, it was only after I replied I spotted your comment was 6 months ago, and you'd probably figured that by now!! – Ade Jan 08 '19 at 17:50
Yes, but there are very few people who tried to post their opinion even if in such case. – Prasad Shinde Jan 09 '19 at 06:38

score 5 · Answer 6 · answered Nov 22 '17 at 21:16

For the most recent version of Angular as of this post, it seems you must first create a MatDialogConfig object and pass it as a second parameter to dialog.open() because Typescript expects the second parameter to be of type MatDialogConfig.

const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);

score 5 · Answer 7 · answered Jun 13 '20 at 15:00

5

dialog-component.css

This code works perfectly for me, other solutions don't work. Use the ::ng-deep shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The ::ng-deep combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

 ::ng-deep .mat-dialog-container {
    height: 400px !important;
    width: 400px !important;
}

answered Jun 13 '20 at 15:00

Andrii Vynnyk

59
1
3

Thanks, really what I need to make my dialog have default size. – Fahd Allebdi Jul 09 '20 at 07:53
Bad advice: ::ng-deep, /deep/ and so on are all deprecated. If you do this now, it'll end in tears when they actually remove it. – DennisK Apr 15 '21 at 13:38
Doesn't work if dim %... – Pedro Ferreira Oct 30 '21 at 10:51

score 3 · Answer 8 · answered Nov 29 '17 at 15:41

3

I think you need to use /deep/, because your CSS may not see your modal class. For example, if you want to customize .modal-dialog

/deep/.modal-dialog {
  width: 75% !important;
}

But this code will modify all your modal-windows, better solution will be

:host {
  /deep/.modal-dialog {
  width: 75% !important;
  }
}

answered Nov 29 '17 at 15:41

Volodymyr Khmil

1,078
15
13

5

For people reading this in 2018, /deep and all its variants are DEPRECATED – Cec Sep 17 '18 at 07:35

score 2 · Answer 9 · answered Nov 06 '18 at 13:08

2

This worked for me:

dialogRef.updateSize("300px", "300px");

answered Nov 06 '18 at 13:08

Gerhardengel

21
2

Kevin V · Answer 10 · 2019-08-09T13:30:54.767

You can also let angular material solve the size itself depending on the content. This means you don't have to cloud your TS files with sizes that depend on your UI. You can keep these in the HTML/CSS.

my-dialog.html

<div class="myContent">
  <h1 mat-dialog-title fxLayoutAlign="center">Your title</h1>
  <form [formGroup]="myForm" fxLayout="column">
    <div mat-dialog-content>
    </div mat-dialog-content>
  </form>
</div>

my-dialog.scss

.myContent {
    width: 300px;
    height: 150px;
}

my-component.ts

const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });

score 1 · Answer 11 · answered Dec 23 '19 at 14:19

On smaller screen's like laptop the dialog will shrink. To auto-fix, try the following option

http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html

Additional Reading https://material.angular.io/cdk/layout/overview

Thanks to the solution in answersicouldntfindanywhereelse (2nd para). it worked for me.

Following is needed

import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'

score 0 · Answer 12 · answered Jun 17 '22 at 21:35

0

component.ts

const dialog = matDialog.open(DialogComponent, {
  data: {
    panelClass: 'custom-dialog-container',
    autoFocus: false,
  },
});

styles.scss

// mobile portrait:
@media (orientation: portrait) and (max-width: 599px) {
  // DIALOG:
  // width:
  .cdk-overlay-pane {
    max-width: 100vw !important;
  }
  // padding
  .custom-dialog-container .mat-dialog-container {
    padding: 5px !important;
  }
}

answered Jun 17 '22 at 21:35

Serge N.

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 17 '22 at 22:04

Angular2 Material Dialog css, dialog size

12 Answers12

Linked