Clash Royale CLAN TAG#URR8PPP

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

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://angular-fxlayoutgap-calc-mralnz.stackblitz.io

<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:

2 Answers
2

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.

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

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.