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

score 134 · Accepted Answer · edited Jun 20 '20 at 09:12

134

Updated Answer

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

Link to StackBlitz Demo. Read this official documentation for more information.

Original Answer

Use ViewEncapsulation to override default styles with your styles.

In the component which opens the dialog, do the following changes:

import {ViewEncapsulation} from '@angular/core';
    
@Component({
  .....,
  encapsulation: ViewEncapsulation.None 
})

and in that component's css file, add the following class:

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

Here is a link to Plunker Demo.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 29 '17 at 07:54

FAISAL

33,618
10
97
105

9

This is very much a brute force approach as it will of the padding for *all* material dialogs! Instead, add a class like `app-full-bleed-dialog` to the dialog's `panelClass` configuration. Then in you *global styles*, add your overrides with the `.app-full-bleed-dialog .mat-dialog-container` selector. – Will Howell Aug 29 '17 at 15:32
style is not getting applied to chlid elements – Dhiresh Budhiraja Apr 06 '19 at 05:21
In Angular Material 8.2.1 this did not work if the value for `panelClass` contained a `-`. So `'panelClass': 'foobar'` works, but `'panelClass': 'foo-bar'` does not. – Jack Sep 28 '19 at 17:31
The updated answer works for me. :) My custom class name is '.px-login-modal' if that might interest others. – Naveen Kumar V Aug 17 '20 at 09:30

score 47 · Answer 2 · answered Aug 29 '17 at 15:44

47

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.

answered Aug 29 '17 at 15:44

Will Howell

3,585
2
21
32

Well why would one want to maintain overridden styles in global styles file when thay can be defined in component's styles? ViewEncapsulation is provided by angular for a reason. – FAISAL Aug 29 '17 at 15:53
4

ViewEncapsulation is provided for scoping a component's styles only to itself. The OP asked (in other words) how to style a _different_ component. The component you're loading into the dialog is a child of `.mat-dialog-container`, so it has no way to target that selector without using global styles. That's exactly what `None` does anyway, and that's why it works. So yes, your approach works, but there is **no possible way** to ensure that only that one dialog is affected... If you can demo using 2 dialogs, one without padding, and one with, _without using panelClass_, I'll concede. – Will Howell Aug 29 '17 at 16:06
Sure i'll have a look later on, i am not denying your concerns, have to test it myself first. – FAISAL Aug 29 '17 at 16:08
1

I have to agree with Will Howell, Changing ViewEncapsulation will actually give you lot of trouble of overriding global styles in the long run. I have been there done that. So this seems to be the better way of doing it. – Vignesh Aug 21 '18 at 07:13

Isaac Weingarten · Answer 3 · 2022-01-26T23:45:57.703

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)

edited Jan 26 '22 at 23:45

answered Apr 26 '20 at 22:14

Isaac Weingarten

977
10
15

score 2 · Answer 4 · answered Jan 12 '23 at 07:13

You can use the following code snippet

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

The ::ng-deep selector is used to apply styles to elements that are not directly affected by a component's styles. It allows you to bypass the view encapsulation that Angular provides by default.

score 1 · Answer 5 · answered Jul 06 '21 at 13:16

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

score 0 · Answer 6 · answered Aug 26 '22 at 09:43

0

Simply add the follwing code to your style.css or style.scss:

.mat-dialog-container {
    padding: 0 !important;
}

This will override the mat-dialog-class's padding.

answered Aug 26 '22 at 09:43

Franco

441
3
18

Get rid of white space around Angular Material modal dialog

6 Answers6