CODEWITHSUNDEEP
angularangular-materialangular-material2
codeRamen
codeRamen

Reputation: 487

Overriding Angular Material Size and Styling of md-dialog-container

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.

Upvotes: 37

Views: 78701

Answers (7)

Awara Amini
Awara Amini

Reputation: 572

You may need to insert width/height like that:

    const dialogConfig = new MatDialogConfig();
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        dialogConfig.data = { title: 'Register a doctor shekh' };
        dialogConfig.height = '450px';
        dialogConfig.width = '700px';
        const dialogRef = this.dialog.open(AddDoctorComponent, dialogConfig);

Upvotes: 0

J.Gentsch
J.Gentsch

Reputation: 17

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

Upvotes: -1

Aditya Goyal
Aditya Goyal

Reputation: 1

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

Upvotes: 0

Alisson Reinaldo Silva
Alisson Reinaldo Silva

Reputation: 10695

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.

Upvotes: 33

FAISAL
FAISAL

Reputation: 34673

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.

Upvotes: 93

fateme noruzi
fateme noruzi

Reputation: 39

    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.

Upvotes: 1

Sonicd300
Sonicd300

Reputation: 2049

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

Upvotes: 7

Related Questions