MdDialog width configuration uncenter dialog.

[yudielcurbelo]

Bug, feature request, or proposal:

Bug: MdDialog not centered when is open passing a configuration of a custom width.

What is the expected behavior?

MdDialog should be the size of the specified width but keep his center location.

What is the current behavior?

MdDialog is being moved to the left.

What are the steps to reproduce?

https://plnkr.co/edit/fvG6lS8VIihJUlfu01Bv?p=preview

openDialog() { this.dialog.open(DialogOverviewExampleDialog, { width: '600px' }); }

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-beta.2
Chrome in Windows

[crisbeto]

This happens when the dialog hits the max width and is an issue with how we have the dialog set up in general. I'll be reworking it once #3184 is merged.

[LilSebastian5000]

@crisbeto Is there a known workaround for this at the moment? Is there a way to apply styling to ".mat-dialog-container" for now that I'm unaware of? When I attempt to set a style to that class in my styleUrl sheet, it is ignored, since it is launched after the page is loaded from a button click.

[crisbeto]

There is no nice workaround @ryanpm40. Technically adding a max-width to the .cdk-overlay-pane should fix it, but the cdk-overlay-pane is used for all overlay-based Material components. Now that #3184 is merged, I can do a proper fix for it, though.

[LilSebastian5000]

@crisbeto Gotcha, thanks for the update! I suppose another temporary option for me would be to use some javascript to get the class element (but obviously not very ideal):

let containerElem:HTMLElement = <HTMLElement>document.getElementsByClassName('mat-dialog-container')[0];
containerElem.style.width="900px";

Looking forward to those changes :)

[MA-Maddin]

I like the current behaviour that it get shrinked when the config's width gets hit, since a dialog should never be larger than screen I guess!?

Only problem is that it isn't centered anymore then.

Adding margin: auto to .mat-dialog-container does the trick.

https://github.com/angular/material2/blob/70b31f177a2dacfd08f47b2a8898fca3f7bb91f9/src/lib/dialog/dialog.scss#L19

So workaround for that is adding this to global stylesheet:

md-dialog-container {
    margin: auto;
}

http://plnkr.co/edit/yYM6kBUQQe2lQJcVKdcP?p=preview

[willshowell]

As another solution, you can add a panelClass to the dialog and then apply whatever css just to that specific 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;
}

[zijianhuang]

thanks willshowell. This works well, and elegantly enough.

[julianobrasil]

@willshowell , I was testing the feature above, but I must be doing something terribly wrong. I tried to change background color of the backdrop panel and/or of the panel, but it seems to have no effect at all.

Is it working properly? Plunker: https://plnkr.co/edit/OjPQdv6Txqcn1v5nXG3p?p=preview

[willshowell]

@julianobrasil the styles must be global or without view encapsulation 😁

https://plnkr.co/edit/lGFjGSmhlr9tOoHK1gJp?p=preview

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