diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html index ffceaaae13bf..b54508cf30b0 100644 --- a/src/demo-app/dialog/dialog-demo.html +++ b/src/demo-app/dialog/dialog-demo.html @@ -23,6 +23,24 @@

Dialog dimensions

+

+ + + + + + +

+ +

+ + + + + + +

+

Dialog position

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 87c67b151e18..1895b6e31f48 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,7 +1,8 @@ import {Component, Inject, ViewChild, TemplateRef} from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; +import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; +const defaultDialogConfig = new MatDialogConfig(); @Component({ moduleId: module.id, @@ -21,6 +22,10 @@ export class DialogDemo { backdropClass: '', width: '', height: '', + minWidth: '', + minHeight: '', + maxWidth: defaultDialogConfig.maxWidth, + maxHeight: '', position: { top: '', bottom: '', diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 424bec9e84ab..7f6f47d42da4 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -57,6 +57,18 @@ export class MatDialogConfig { /** Height of the dialog. */ height?: string = ''; + /** Min-width of the dialog. If a number is provided, pixel units are assumed. */ + minWidth?: number | string; + + /** Min-height of the dialog. If a number is provided, pixel units are assumed. */ + minHeight?: number | string; + + /** Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw */ + maxWidth?: number | string = '80vw'; + + /** Max-height of the dialog. If a number is provided, pixel units are assumed. */ + maxHeight?: number | string; + /** Position overrides. */ position?: DialogPosition; diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss index 2f04aec0b4cb..4a72cc903a01 100644 --- a/src/lib/dialog/dialog.scss +++ b/src/lib/dialog/dialog.scss @@ -5,7 +5,6 @@ $mat-dialog-padding: 24px !default; $mat-dialog-border-radius: 2px !default; -$mat-dialog-max-width: 80vw !default; $mat-dialog-max-height: 65vh !default; $mat-dialog-button-margin: 8px !default; @@ -17,7 +16,6 @@ $mat-dialog-button-margin: 8px !default; border-radius: $mat-dialog-border-radius; box-sizing: border-box; overflow: auto; - max-width: $mat-dialog-max-width; outline: 0; // The dialog container should completely fill its parent overlay element. diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 1ce22f92d319..4d4b0fde7242 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -336,6 +336,69 @@ describe('MatDialog', () => { expect(overlayPane.style.height).toBe('100px'); }); + it('should should override the min-width of the overlay pane', () => { + dialog.open(PizzaMsg, { + minWidth: '500px' + }); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.minWidth).toBe('500px'); + }); + + it('should should override the max-width of the overlay pane', fakeAsync(() => { + let dialogRef = dialog.open(PizzaMsg); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.maxWidth).toBe('80vw', + 'Expected dialog to set a default max-width on overlay pane'); + + dialogRef.close(); + + tick(500); + viewContainerFixture.detectChanges(); + flushMicrotasks(); + + dialogRef = dialog.open(PizzaMsg, { + maxWidth: '100px' + }); + + viewContainerFixture.detectChanges(); + + overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.maxWidth).toBe('100px'); + })); + + it('should should override the min-height of the overlay pane', () => { + dialog.open(PizzaMsg, { + minHeight: '300px' + }); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.minHeight).toBe('300px'); + }); + + it('should should override the max-height of the overlay pane', () => { + dialog.open(PizzaMsg, { + maxHeight: '100px' + }); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.maxHeight).toBe('100px'); + }); + it('should should override the top offset of the overlay pane', () => { dialog.open(PizzaMsg, { position: { diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 54d358c8556e..f9a370ea8ff1 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -190,7 +190,11 @@ export class MatDialog { scrollStrategy: this._scrollStrategy(), panelClass: dialogConfig.panelClass, hasBackdrop: dialogConfig.hasBackdrop, - direction: dialogConfig.direction + direction: dialogConfig.direction, + minWidth: dialogConfig.minWidth, + minHeight: dialogConfig.minHeight, + maxWidth: dialogConfig.maxWidth, + maxHeight: dialogConfig.maxHeight }); if (dialogConfig.backdropClass) {