Components: MdDialog width configuration uncenter dialog.

Created on 22 Feb 2017 · 9Comments · Source: angular/components

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

P3 materiadialog has pr

Source

yudielcurbelo

👍6

Most helpful comment

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;
}

willshowell on 27 Jun 2017

👍16

All 9 comments

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 https://github.com/angular/material2/pull/3184 is merged.

crisbeto on 22 Feb 2017

@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.

LilSebastian5000 on 2 Mar 2017

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.

crisbeto on 2 Mar 2017

@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 :)

LilSebastian5000 on 2 Mar 2017

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

MA-Maddin on 27 Jun 2017

👍1

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;
}

willshowell on 27 Jun 2017

👍16

thanks willshowell. This works well, and elegantly enough.

zijianhuang on 30 Jun 2017

@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