[css] Angular2 Material Dialog css, dialog size

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?

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

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

This worked for me:

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

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!

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.

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

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

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'

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 )

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 });