Angular flex-layout - fxLayoutGap causes annoying gap at end of wrapped rows

Question

Using fxLayoutGap and wrap leaves an annoying margin at the end of each row that is wrapped.

Is there a way to fix this?

https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html

<div fxLayout="row wrap" fxLayoutGap="25px">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

I am using:

@angular/core@6.0.0
@angular/material@6.0.1
@angular/flex-layout@6.0.0-beta.15

score 13 · Answer 1 · answered Jun 19 '19 at 08:35

For anyone looking for the answer to this problem, you need to add grid to fxLayoutGap. The documentation at https://github.com/angular/flex-layout/wiki/fxLayoutGap-API states:

To use fxLayoutGap with a gutter system, simply append the suffix grid to any fxLayoutGap value. This creates a gutter system by applying a margin to the host element and an inverse padding to each child. Other than this change, it works exactly as the default mode. It also takes flex-order and hidden elements into account, and has the same responsive abilities as the default mode.

Please note that unlike the standard gap functionality, fxLayoutGap with the grid keyword applies a padding to each child element to add the gutter, in addition to the margin on the host element.

That last point is in relation to how the grid on the child elements can clash with the fxLayoutGap on the parent element so be aware that the parent may override the child layout. Adding an extra div between the two will solve that issue.

Just as a note, when using `` directly inside the container, make sure to wrap the card inside e.g. a `
`, to prevent unexpected layout issues for `` (because of the paddings and margins). — Nicky, Apr 24 '20 at 13:55

score 5 · Answer 2 · answered May 15 '18 at 16:29

You could hack it by adding a dummy component at the end which isn't displayed but gets laid out by flex-layout so that the "last" form field is also given the extra margin, and then adjusting the parent container margins to offset the additional right margin:

<div fxLayout="row wrap" fxLayoutGap="25px" style="margin-right:-25px;">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <span class="cdk-visually-hidden"></span>
</div>

But I think this is something that should be fixed in flex-layout.

score 2 · Answer 3 · answered Jul 30 '18 at 23:26

2

1) remove fxLayoutGap because it add margin-right to the child item.

2) add style to child item = margin: 0 25px; instead.

answered Jul 30 '18 at 23:26

unclepiak

49
4

except this needs to be able to wrap, so that rules out having a constant margin value – fartwhif Feb 24 '22 at 17:08

Simon_Weaver · Answer 4 · 2022-07-19T21:47:41.530

Depending upon what browsers you need to support, you may be able to use the new css gap property (instead of fxLayoutGap) which now works with flex layout. it will automatically fix issues like this since that's its purpose.

Support is good in Chrome + Edge from July 2020 onwards and Firefox even earlier. It's supported now in Safari but only from iOS 14.5 onwards.

It's certainly a LOT simpler if you're able to use it now or later.

Angular flex-layout - fxLayoutGap causes annoying gap at end of wrapped rows

4 Answers4

Linked