CODEWITHSUNDEEP
angular-material2
Santhosh
Santhosh

Reputation: 1079

How to remove padding from angular material dialog boxes?

Please see below link for issue description.

I want to remove the blue circled spaces. Thhis padding is showing by default. (how to set padding top, bottom, left and right to 0px)

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

Thanks for you help

.html code

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

.ts code

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
  animal: string;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Upvotes: 4

Views: 9821

Answers (2)

Bhavesh Jha
Bhavesh Jha

Reputation: 31

These are the following steps, using this you can rid of the extra padding and unnecessary rounded corner.

Step 1:

a. Add this css to your component.scss/css.

    .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 0px !important;
    padding: 0px !important;
  }

b. After that set encapsulation none in your component.ts.

    @Component({
    selector     : 'test',
    templateUrl  : './test.component.html',
    styleUrls       : [`./test.component.scss`],
    encapsulation: ViewEncapsulation.None
})

Step 2:

If you want to avoid the encapsulation than simply add this css to your component.scss/css.

 ::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 0px !important;
    padding: 0px !important;
  }

Upvotes: 1

Sampgun
Sampgun

Reputation: 2977

For anyone who may still need this (working with Angular Material 7 and above).

The right solution is adding a class when opening the dialog:

encapsulation: ViewEncapsulation.None
// ...
this._dialog.open(SomeComponent, { panelClass: "foo" });

and then in my some-component.component.scss

/* SCSS */
.foo .mat-dialog-container  {
  padding: 0;
}

blitz

Upvotes: 4

Related Questions