Flex-layout: fxLayout="row" fxLayoutWrap fxLayoutGap="10px" gives an offset starting at the 2nd line

[maxime1992]

<div fxLayout="row" fxLayoutWrap fxLayoutGap="10px">
  <div class="card" fxFlex="25%" *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]">
    Test
  </div>
</div>

https://plnkr.co/edit/f44sdpW159qKSGvWkWm5?p=preview

(probably) related to #106 except that here the layout is set to row

[d3viant0ne]

@maxime1992 - Different issue than #106. In this case layout-gap.ts is filtering out the first element in the collection which is where the weird offset is coming from.

[d3viant0ne]

@ThomasBurleson - Given the way elements wrap, wouldn't it make more sense to use margin-right in layout-gap.ts for fxLayout="row" and drop the filter on the first element?

You would end up with consistent behavior for both wrap & wrap-reverse

[d3viant0ne]

Resolved with f35c58f

[maxime1992]

I tried to upgrade from 2.0.0-beta.1 to 2.0.0-beta.4 and the problem is still here on my end.

Take a look to the previous Plunkr : https://plnkr.co/edit/f44sdpW159qKSGvWkWm5?p=preview
I dig into lib/config.js, and I tried to access to
https://unpkg.com/@angular/flex-layout/bundles/flex-layout.umd.js
which redirects me to :
https://unpkg.com/@angular/flex[email protected]/bundles/flex-layout.umd.js

so Plunkr is using the latest version and the gap issue is still here.

I think this issue should be re opened.

[prateek0103]

@angular/flex-layout: 2.0.0-beta.4

For a quick workaround, I added CSS rule margin-left equal to the fxLayoutGap value to the first element. Check out this plnk

This needs a fix and should be reopened.

[ThomasBurleson]

@d3viant0ne - f35c58f does not address issues manifesting when fxLayoutWrap is used.

I suggest the following changes:

• margin-right be used with fxLayout="row" fxLayoutWrap fxLayoutGap combinations
• margin-bottom be used with fxLayout="column" fxLayoutWrap fxLayoutGap combinations

[kousik77]

how to set margin top and bottom

[spt131]

Any fix for this? Using 2.0 rc1 doesn't resolve.

[tabruzzomufg]

?? having the same issue? any fixes for this?

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