Angular2 Material Dialog css, dialog size

css angular angular-material angular-material2

151,051

Solution 1

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.

Solution 2

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

Solution 3

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 )

Solution 4

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!

Solution 5

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.

View more solutions

151,051

ethan

Updated on July 09, 2022

Comments

ethan almost 2 years

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?
ethan over 7 years

Thanks, I ended up adding a DIV and style on that.
vanillaSugar about 7 years

This is not working with this dialog - material.angular.io/components/component/dialog .. changes are not applied
Elmer Dantas about 7 years

@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.
ThePartyTurtle almost 7 years

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 almost 7 years

@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.
Elmer Dantas almost 7 years

@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?
mwilson almost 7 years

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.
userx about 6 years

where should I place the md-dialog-container class? and where should I use it?
Elmer Dantas about 6 years

@FurqanShakir you should check dev tools if the class is still the same..the answer/angular has changed since the question was posted
Cec almost 6 years

For people reading this in 2018, /deep and all its variants are DEPRECATED
Lahiru Chandima almost 6 years

Is there any way to find the current size from inside the dialog component?
mxr7350 over 5 years

This is very handy solution if you want to change certain dialog without affecting every dialog in your project.
Ade over 5 years

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 over 5 years

@PrasadShinde you have to put the CSS class in your global Styles.css file (or presumably .scss if that's what you're using).
Kostas Siabanis over 5 years

@Ade You would have to use media breakpoints for that
Ade over 5 years

@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!!
Prasad Shinde over 5 years

Yes, but there are very few people who tried to post their opinion even if in such case.
Tenzolinho over 5 years

What if I want to add more than height and width? Like border-radius, or background. Where do I put this css?
challamzinniagroup over 4 years

@mwilson::ng-deep .[cdk|md class] { ... } worked for me - great find - wish this wasn't buried in just a comment. Thanks!
Max Yari about 4 years

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.
Fahd Allebdi almost 4 years

Thanks, really what I need to make my dialog have default size.
TheViralGriffin over 3 years

You can add relevant css like make use of panelClass
DennisK about 3 years

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.
Pedro Ferreira over 2 years

Doesn't work if dim %...
SDekov about 2 years

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.