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

fxLayoutAlign sets wrong max-width when used with fxLayout #876

Closed
danmana opened this issue Nov 2, 2018 · 1 comment · Fixed by #877
Closed

fxLayoutAlign sets wrong max-width when used with fxLayout #876

danmana opened this issue Nov 2, 2018 · 1 comment · Fixed by #877
Labels
has pr A PR has been created to address this issue

Comments

@danmana
Copy link
Contributor

danmana commented Nov 2, 2018

Bug Report

What is the expected behavior?

<div fxLayout="column" fxLayoutAlign="center center"></div>

Should generate css:

{
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    place-content: center;
    align-items: center;
}

What is the current behavior?

It adds an extra css property: max-width: 100%

{
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    max-width: 100%;
    place-content: center;
    align-items: center;
}

What are the steps to reproduce?

https://stackblitz.com/edit/angular-7ktrke?file=src%2Fapp%2Fapp.component.ts

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

Documentation states that max-width should be set only if the cross axis is set to stretch.

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

Angular 7.0.2
flex-layout 7.0.0-beta.19

Is there anything else we should know?

The problem only apears when both fxLayout and fxLayoutAlign are used together; using just fxLayoutAlign generates correct css.

The problem is that LayoutAlignDirective._allowStretching is called twice, the first time with start stretch - the default setting, and only after that with center center.
LayoutAlignDirective does not reset the max-width/max-height when changing away from the stretch cross axis.

The first call is triggered by ngOnChanges on LayoutDirective, which triggeres LayoutAlignDirective._onLayoutChange on a LayoutAlign directive that is not yet initialized with the input values, so it uses the defaults start stretch.

The next call is triggered by ngOnChanges on LayoutAlignDirective, and this time the align settings are initialized correctly with center center, but max-width is never reset

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has pr A PR has been created to address this issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants