Responsive fxFlex applying incorrect value

Bug Report

Using the following markup:

<section fxLayout="row wrap" fxLayoutGap="0" fxLayoutGap.gt-xs="20px">
  <mat-card
    *ngFor="let widget of widgets"
    fxFlex.gt-sm="0 1 calc(100% / 3 - 20px)"
    fxFlex.gt-xs="0 1 calc(100% / 2 - 20px)"
    fxFlex="0 1 100%">
    <mat-card-header>
      <mat-card-title>
        <a [routerLink]="['widget', widget.color]">{{ widget.color }} widget</a>
      </mat-card-title>
    </mat-card-header>
  </mat-card>
</section>

What is the expected behavior?

On a sufficiently large screen, render 3 columns of cards, applying the correct flex value of 0 1 calc(33.3333% - 20px)

What is the current behavior?

Only 2 columns of cards are rendered, applying flex value of 0 1 calc(50% - 20px).

If you shrink the browser window to mobile, then back up to full screen you’ll notice the correct flex-basis values are applied.

What are the steps to reproduce?

Stackblitz: https://angular-flex-repro.stackblitz.io/

Note: A project I’m working on now initially renders 3 cards, but upon navigating to another route and coming back, there were only 2 cards. A refresh fixed it that case, but that is why the additional routing functionality is included in the blitz (even though I can’t reproduce that exact behavior there).

Edit: When I resize the window to get 3 card layout, navigate away, and back, cards are back to 2 cols. Same behavior as initial render.

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

Tested on Chrome 69, Firefox 61, Safari 11.1, MacOS 10.13. Dependency versions can be seen in the stackblitz.

[probert94]

After investigating a bit more I noticed a few things. In my usecase, I need different flex settings for xs, sm and all others.

Here is what I noticed:

1. Using fxFlex.xs, fxFlex.sm and fxFlex.gt-sm will only correctly apply fxFlex.gt-sm. All others use the fallback (fxFlex).
2. Using fxFlex.lt-sm, fxFlex.lt-md and fxFlex.gt-sm will correctly apply fxFlex.gt-sm and fxFlex.lt-md on sm-Screens. On xs-Screens, however, fxFlex.lt-md is used instead of fxFlex.lt-sm.
3. Using fxFlex.lt-sm, fxFlex and fxFlex.gt-sm applies everything correctly. The fallback (fxFlex) is only used for sm-Screens.

Note, that in all cases, the results were correct after resizing the screen.

@itsthesteve The workaround from case 3 might solve your problem too. You probably can just redifine your fxFlex definitions:

• fxFlex.gt-sm="0 1 calc(100% / 3 - 20px)" –> fxFlex.gt-sm="0 1 calc(100% / 3 - 20px)"
• fxFlex.gt-xs="0 1 calc(100% / 2 - 20px)" –> fxFlex="0 1 calc(100% / 2 - 20px)"
• fxFlex="0 1 100%" –> fxFlex.lt-sm="0 1 100%"

[angular-automatic-lock-bot[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.}