Skip to content

Commit 43d66d6

Browse files
feat(dialog): support minWidth, minHeight, maxWidth and maxHeight
* Adds Dialog support for `minWidth`, `minHeight`, `maxWidth` and `maxHeight` via config. Mostly delegates to Overlay. * Moves declared `max-width` on `. mat-dialog-container` stylesheet to be authored via `MatDialogConfig`, providing the same default `80vw` value. Without this change, there would likely be undesired layout results due to different constraints being set on the overlay container vs the nested the dialog container. * Added note on `minHeight` and `maxHeight` regarding the potential need to also set a `height` due to the rules around computed height resolution (https://www.w3.org/TR/CSS2/visudet.html#min-max-widths). Any value set on `height` as a default would probably be assuming too much and may have varying results across browsers.
1 parent ac70420 commit 43d66d6

File tree

3 files changed

+25
-3
lines changed

3 files changed

+25
-3
lines changed

src/lib/dialog/dialog-config.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,26 @@ export class MatDialogConfig {
5757
/** Height of the dialog. */
5858
height?: string = '';
5959

60+
/** Min-width of the dialog. */
61+
minWidth?: string = '';
62+
63+
/**
64+
* Min-height of the dialog.
65+
* For this value to be effectively applied, `height` may also need to be defined.
66+
* See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
67+
*/
68+
minHeight?: string = '';
69+
70+
/** Max-width of the dialog. */
71+
maxWidth?: string = '80vw';
72+
73+
/**
74+
* Max-height of the dialog.
75+
* For this value to be effectively applied, `height` may also need to be defined.
76+
* See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
77+
*/
78+
maxHeight?: string = '';
79+
6080
/** Position overrides. */
6181
position?: DialogPosition;
6282

src/lib/dialog/dialog.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
$mat-dialog-padding: 24px !default;
77
$mat-dialog-border-radius: 2px !default;
8-
$mat-dialog-max-width: 80vw !default;
98
$mat-dialog-max-height: 65vh !default;
109
$mat-dialog-button-margin: 8px !default;
1110

@@ -17,7 +16,6 @@ $mat-dialog-button-margin: 8px !default;
1716
border-radius: $mat-dialog-border-radius;
1817
box-sizing: border-box;
1918
overflow: auto;
20-
max-width: $mat-dialog-max-width;
2119
outline: 0;
2220

2321
// The dialog container should completely fill its parent overlay element.

src/lib/dialog/dialog.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,11 @@ export class MatDialog {
190190
scrollStrategy: this._scrollStrategy(),
191191
panelClass: dialogConfig.panelClass,
192192
hasBackdrop: dialogConfig.hasBackdrop,
193-
direction: dialogConfig.direction
193+
direction: dialogConfig.direction,
194+
minWidth: dialogConfig.minWidth,
195+
minHeight: dialogConfig.minHeight,
196+
maxWidth: dialogConfig.maxWidth,
197+
maxHeight: dialogConfig.maxHeight
194198
});
195199

196200
if (dialogConfig.backdropClass) {

0 commit comments

Comments
 (0)