Angular2 Material Dialog CSS, Dialog Size

Angular2 Material Dialog css, dialog size

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.

What is the best practise for controlling the size of Angular Material dialog?

The best practise to control the size of an Angular Material dialog is via MatDialogConfig. You will have more control with this config than with CSS, since you don't need to override Angular Material's CSS classes. In this config (see Angular Material Dialog API docs) in your component, you can specify the needs for the size of your dialog:

height: string
maxHeight: number | string
maxWidth: number | string
minHeight: number | string
minWidth: number | string
width: string

You can pass this information as second argument inside the .open() method of your dialog.

Example (see StackBlitz):

const dialogConfig = {
     maxHeight: '300px',
     maxWidth: '300px',
}
const dialogRef = this.dialog.open(DialogContentExampleDialog, dialogConfig);

Here the dialog will have a max-width and max-height of both 300px.

If you want to display different dialogs based on the user's screen width, you can use the BreakpointObserver from Angular's CDK.

Example (see StackBlitz):

Import BreakpointObserver and add it to constructor.

import { BreakpointObserver } from '@angular/cdk/layout';

constructor(private breakpointObserver: BreakpointObserver) {}

Add a function that calculates the dialog dimensions

getDialogDimensions() {
    const mobileDialogConfig = {
        maxHeight: '300px',
        maxWidth: '300px'
    };

    const desktopDialogConfig = {
        maxHeight: '600px',
        maxWidth: '300px'
    };

    const isMobile = this.breakpointObserver.isMatched('(max-width: 600px)');
    return isMobile ? mobileDialogConfig : desktopDialogConfig;
}

Add this function as second inside the .open() method of the dialog.

const dialogRef = this.dialog.open(DialogContentExampleDialog, this.getDialogDimensions());

Outcome

Small dialog

Larger dialog

Angular Material 2 : How to overwrite Dialog max-width to 100vw?

Add a css class in your global styles.css e.g.

.full-width-dialog .mat-dialog-container {
  max-width: 100vw !important;
}

.. then provide the panelClass to your dialog:

this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'})

Read this documentation.

md-dialog size Material for Angular 2 troubleshooting

My page was missing <!DOCTYPE html>

https://github.com/angular/material2/issues/2351

See this answer for more info about dialogs:
Angular2 Material Dialog css, dialog size

is it possible to set different height and width for a dialog in Angular material Design Angular 5

Within your dialog's component you can inject MatDialogRef and call its updateSize method to change the height/width according to your needs.

Check an example here

angular material dialog is not responsive

you can try by adding margin: 0 auto; to your dialog setting:

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  margin: '0 auto',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config
};

How to increase automatic height of matdialogbox in angular 5?

Try this, it will take complete height of the page for your matdialog

 uploadFiles(): void {
   const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
        width: '100%',
        minHeight: 'calc(100vh - 90px)',
        height : 'auto'
    });
 }

Angular2 Material Dialog CSS, Dialog Size