Get rid of white space around Angular Material modal dialog

Question

I want to get rid of the white space in my Angular Material modal dialog. How do I style the css so I can't see any white? My css so far:

app-commission-me-dialog {
    margin: 0px;
    padding: 0px;
}

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}

Answer 1

I made a comment on the chosen answer, but I'd like to clarify in a full answer. If you add dialog styles to your component and set ViewEncapsulation to None, those styles will globally affect your whole app, and any future dialogs will open without padding.

Instead opt for utilizing the dialog's panelClass property:

component.ts

this.dialog.open(MyDialogComponent, {
  panelClass: 'app-full-bleed-dialog', 
  data: ...
});

global stylesheet

.app-full-bleed-dialog .mat-dialog-container {
  padding: 0;
}

That way, you can still keep encapsulation on your dialog component styles, and you can selectively reuse your app-full-bleed-dialog class as needed.

To read more about customizing Material components, check out this guide.

Answer 2

if u wanna remove the padding just horizontally
wrap in the dialog content in <div mat-dialog-content> element then remove the padding like this

HTML

<div mat-dialog-content class="mat-dialog-content">
    content
</div>

CSS

.mat-dialog-content {
  padding: 0;
}

(u can add margin: -24px; to the .mat-dialog-content class this will remove the padding all together)

Answer 3

Extending @Naisal answer if you want a more compact angular material dialog, here are some styles that you can use.

.custom-dialog-container .mat-dialog-container {
    padding: 15px !important;
    overflow-x: hidden;
    overflow-y: hidden;
    top:20px;
}

.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

.mat-dialog-actions {
    margin-top: -15px;
}

You can create custom styles for only certain dialogs or a global style in you style.css file