question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MdDialog container padding does not match spec

See original GitHub issue

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. screenshot from 2017-01-20 11 20 43

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:8
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
Haske107commented, Aug 17, 2017

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.

3reactions
Xapuucommented, Feb 23, 2018

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}}
     }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Get rid of white space around Angular Material modal dialog
and in that component's css file, add the following class: .mat-dialog-container { padding: 0px !important; }. Here is a link to Plunker ...
Read more >
Announcing the AngularJS Material v1.2.0 Release - DevIntent
Button; Checkbox; Chips; Input and Input Container ... button: horizontal padding should match the spec (3205b33), closes #10535 #10535 ...
Read more >
Cards - Components - Google design guidelines | 디자인
12 - Primary text Text: 24sp Top padding: 24dp Right and left padding: 16dp Subtext ... mdDialog: button sizing does not match specification...
Read more >
Demos > Dialog - AngularJS Material
Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering...
Read more >
Basic Usage of mdDialog - CodePen
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ... Note: The Confirm dialog does not use $mdDialog.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found