From 9e583bfd3a640784b78847b037ed873df38c4d38 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 26 Oct 2020 21:00:00 +0100 Subject: [PATCH] fix(material/dialog): incorrect action height if box-sizing is configured globally It's common for apps to set `* { box-sizing: border-box; }` at a global level which ends up breaking the styles of our dialog. These changes set an explicit `box-sizing` to ensure that it still looks consistently. This is in line with what we've done in other similar cases. Fixes #20887. --- src/material/dialog/dialog.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss index 1751801dc466..a7db73658d5e 100644 --- a/src/material/dialog/dialog.scss +++ b/src/material/dialog/dialog.scss @@ -50,6 +50,10 @@ $mat-dialog-button-margin: 8px !default; min-height: 52px; align-items: center; + // Explicitly set a box-sizing since people commonly set `border-box` + // on all elements which will break the height of the dialog actions. + box-sizing: content-box; + // Pull the actions down to avoid their padding stacking with the dialog's padding. margin-bottom: -$mat-dialog-padding;