MdDialog container padding does not match spec

[LOZORD]

Bug, feature request, or proposal:

MdDialog (<md-dialog-container>) currently pads the entire child (user-supplied) content with 24px.
It should not pad the action content (or rather, pad according to the spec).

What is the expected behavior?

It should only pad the non-action content. Source

What is the current behavior?

It pads all the content.

What are the steps to reproduce?

See here.

What is the use-case or motivation for changing an existing behavior?

To match the Material spec.

Which versions of Angular, Material, OS, browsers are affected?

Angular & Material: current
OS: any/all

Is there anything else we should know?

n/a

[Haske107]

Have we found a fix for this? I can remove the 24px padding via Chrome Dev Tools as .mat-dialog-container but not within CSS.

[prabhat112]

I need to remove the padding on the mat-dialog-container which is now default at 24px. Pls suggest if any way to remove or override it.

[Viktor-Bredihin]

as a workaround you can put this to your global styles (src/styles.css)
.mat-dialog-container {
padding: 0 !important;
}

[arzazahrian]

i have more than 1 dialog if im using :

.mat-dialog-container {
padding: 0 !important;
}
all my dialog padding is 0
how to specify the padding is 0 on the selected dialog ?

[yhalwani]

Try this work around, its a bit extreme having to use view encapsulation but worked for me. https://stackoverflow.com/questions/42306850/need-to-find-css-selector-for-material-design-2s-md-dialog-container

[Xapuu]

Here is my solution, which i think will work for most of the cases, without messing with the view encapsulation prop.

• First set custom class on your dialog box

this.dialog.open(myDialogComponent, {
  panelClass: 'my-dialog'
 });

• Second - put the custom css in your global style.scss and target whatever you feel like (the container in this case)

.my-dialog {
    .mat-dialog-container {
		padding: 0;
		background: none;
                 {{And all the rest of the css you need}}
     }
}

[AMohamedZaki]

you can Simply check this to remove the useless padding

// Add this to your global stylesheet after your theme setup
.myapp-no-padding-dialog .mat-dialog-container {
padding: 0;
}

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

[jelbourn]

Closing this issue since the 2018 updates to the Material Design spec will supersede what's described here.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}