Feature Request - MdDialog should support max-height, max-width, min-height, and min-width

[chaowentan]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

In addition to just width and height, MdDialog should support max-height, max-width, min-height, and min-width.

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

Max & min dimensions allow the dialog to be more responsive.

[BobBDE]

Hi,
You can assign a class to the Dialog and then style it like you want.
Here is an exemple of a full screen dialog:
this.dialog.open(MyDialogComponent, {
panelClass: 'my-full-screen-dialog',
data: { ... }
});
.my-full-screen-dialog .mat-dialog-container {
max-width: none;
width: 100vw;
height: 100vh;
}

As it is styling a child component you should use the :host property of CSS or put the class in a global CSS file (declare by style.css if you use angular-cli).

[chaowentan]

Re: Robin - Yeah, the current API of the MdDialog seems to imply that it's static with fixed width and height. And I'd like it to be more flexible and responsible.

Re: Benjamin - I was wondering if using CSS is the officially supported way of making MdDialog responsive. If so, it'd be nice if the API documentation is updated to mention that.

[BobBDE]

@chaowentan
I don't know if it's the official way to do it... It works fine with me with a responive class.
Yeah, the documentation is always a bit late compare to the real implementation.

[jelbourn]

@chaowentan happy to accept a PR for this Chao 😉

[emilio-martinez]

@jelbourn created PR for this

[parindholakia]

I can not run my application after adding minWidth config option.

it throws following error:

error TS2339: Property 'minWidth' does not exist on type 'MatDialogConfig'.

Environment:

Angular CLI: 1.5.0
Node: 6.9.1
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.11-b01c2d7
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.3
typescript: 2.4.2
webpack: 3.8.1

[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.}