fxLayoutGap grid can conflict with parent gap and causes inconsistent behavior on screen resize

Bug Report

What is the expected behavior?

The negative margin (gutter) should be applied on the fxLayoutGap="8px grid" element at all times.

What is the current behavior?

When a page loads for the first time the negative margin on the host element isn’t applied until the screen hits a media query break point.

What are the steps to reproduce?

I wasn’t able to reproduce this on Stackblitz probably because of the way it renders the live view might be triggering the fix. Here’s how it looks on my machine:

The div surrounding the buttons has a gap grid, but if you inspect it, there’s no style on it until you shrink the page enough to hit a break. after that it correctly has the 0 -8px -8px 0 margin on it even if you return to the original size.

Here’s the code that causes this for me: (buttons have to go in another div or else it screws them up with the gap margins, but it works fine on a tags with the mat-button style ¯\_(ツ)_/¯ )

<div fxLayoutGap="8px grid" fxLayout="row wrap">
      <div>
        <button mat-raised-button class="btn-space" color="primary"
          (click)="newBha()">New BHA</button>
      </div>
      <div>
        <button mat-raised-button class="btn-space" color="primary"
          (click)="copyBha()">Copy This BHA</button>
      </div>
      <div>
        <button mat-raised-button class="btn-space" color="primary"
          (click)="deleteBha()">Delete BHA</button>
      </div>
      <a color="primary">
        <mat-icon>insert_drive_file</mat-icon>
        BHA Report
      </a>
      <a color="primary">
        <mat-icon>insert_drive_file</mat-icon>
        Strap Sheets
      </a>
</div>

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

Angular CLI: 7.2.1
Node: 11.2.0
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.1
@angular/cdk                      7.2.1
@angular/cli                      7.2.1
@angular/flex-layout              7.0.0-beta.23
@angular/material                 7.2.1
@ngtools/webpack                  7.2.1
@schematics/angular               7.2.1
@schematics/update                0.12.1
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

Is there anything else we should know?

[rfuhrer]

Yeah it’s not an incredible scenario to say “Space out these things, and one of these things contains a bunch of things i want to wrap if there’s no room”. But creating this ticket gave me a deeper understanding of how the gaps work. So the outer gap is adding margins to all children, the inner gap grid is adding margins to itself, which means conflict.

So as usual, the solution is even more divs 😃

<div fxLayout="column" fxLayoutGap="10px">
  <div> <!-- gets the 10px margin-->
    <div fxLayoutGap="50px grid" fxLayout="row wrap"> <!-- gets the -50px margin -->

[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.}