Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

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

@danmana

Description

@danmana

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    has prA PR has been created to address this issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions