Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MatDialog ist not centered if width is set to 100% but maxWidth is lower #17841

Open
dardanbujupaj opened this issue Nov 29, 2019 · 2 comments · May be fixed by #17842
Open

MatDialog ist not centered if width is set to 100% but maxWidth is lower #17841

dardanbujupaj opened this issue Nov 29, 2019 · 2 comments · May be fixed by #17842
Assignees
Labels

Comments

@dardanbujupaj
Copy link

@dardanbujupaj dardanbujupaj commented Nov 29, 2019

Reproduction

StackBlitz: https://stackblitz.com/edit/components-issue-nvo6ox

Steps to reproduce:

  1. Open a component as a MatDialog using following configuration
    { width: '100%', maxWidth: '400px' }
  2. Adjust the window width, so that exceeds the dialog-maxWidth of 400px

Expected Behavior

What behavior were you expecting to see?

  • The dialog grows up to its max width of 400px
  • As soon as the maxWidth is hit, the dialog stays the same width and is centered on the window

Actual Behavior

What behavior did you actually see?

  • The dialog is positioned as expected if the width is configured to 99% or lower
  • The dialog is aligned to the left of the window if the width configured to 100%
  • see StackBlitz link above

Environment

  • Angular: 8.2.14
  • CDK/Material: 8.2.3
  • Browser(s): Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Linux
@dardanbujupaj

This comment has been minimized.

Copy link
Author

@dardanbujupaj dardanbujupaj commented Nov 29, 2019

My guess is that the following code:


was written before maxWidth was supported by MatDialog.

Also I don't really understand why justifyContent shouldn't be center when width is set to 100%.

@crisbeto

This comment has been minimized.

Copy link
Member

@crisbeto crisbeto commented Nov 29, 2019

You're right that we shouldn't be doing this when there's a maxWidth and that it was probably introduced before we had a maxWidth option in the first place. We used to have a comment there with the reasoning, but it looks like it was removed as the file was changing over time. I can't dig up the PR that introduced it, but here's the oldest version of the file I could find that still has the comment: https://github.com/jelbourn/components/blob/eb1293cba047d0ac310d216ac310ae16f5104e4c/src/cdk/overlay/position/global-position-strategy.ts#L84. I'll submit a fix.

@crisbeto crisbeto self-assigned this Nov 29, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 29, 2019
… and there's a maxWidth

A long time ago we introduced some logic that clears the `justifyContent` from a global overlay if it's `width` is set to 100%, in order to ensure that the element is flush against the viewport edge. Some time later we added a `maxWidth` option, but we never accounted for it which means that if an element is set to be `width: 100%; maxWidth: '500px'`, we'll reset the alignment incorrectly. These changes tweak the logic so it only resets if there is no `maxWidth` or if it's set to 100%.

Fixes angular#17841.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.