Combination of fxLayoutWrap fxLayoutGap modification

[Jonatthu]

<div class="first" fxFlex="100%" fxFlex.xs="auto" fxLayout="row" fxLayoutWrap fxLayoutGap="20px">
        <div class="title" fxFlex="100%"><b>Contact Information</b></div>
        <div class="item" fxFlex="25%" *ngFor="let i in [1,2,3,4,5,6]">
          <b>Phone</b> <br>
          {{listing.contact.phoneNumber}}
        </div>
</div>

Ok I'm using beta 4 and I've seen beta 5 milestones but i'm not seeing something to my question.
Right now this code above is generating the items with margin-left 20px all of them but is not doing groups of 4 as I intended with 25% (1/4 of the container per item).

Intead apply margin-left of 20px I would recommend to apply padding-left of 20px and the parent layout
have margin-left of -20px (margin-left: -20px) so the list is align for every group of 100% insert a div parent for example:

<div class="first" fxFlex="100%" fxFlex.xs="auto" fxLayout="row" fxLayoutWrap fxLayoutGap="20px">
        <div class="title" fxFlex="100%"><b>Contact Information</b></div>
        <!-- Insert for every group of 100% or almost 100% by example if in 5 elements are 75% and the next item is 40% is 115% so just insert the parent div in the 75% and the other 40% item put it in another parent of 100%--->
        <div class="auto-inserted-parent-by-flex" style="margin-left:-20px">
              <div class="item" fxFlex="25%" *ngFor="let i in [1,2,3,4,5,6]">
              <b>Phone</b> <br>
              {{listing.contact.phoneNumber}}
             </div>
        </div>
</div>

Insert for every group of 100% or almost 100% by example if in 5 elements are 75% and the next item is 40% is 115% so just insert the parent div in the 75% and the other 40% item put it in another parent of 100%

For each parent is a width of calc(100% + 20px)
My picture seems like the items are separated but they are not

[macjohnny]

@Jonatthu I stumbled upon the same issue. I agree with your approach.

[Jonatthu]

Maybe with just a general parent for the children (a general Orange box for the blue ones) with a margin left of -20px or the gap that you put in fxLayoutGap

[ThomasBurleson]

fxLayoutGap now only applies margin-right (for fxLayout=row) and margin-bottom (for fxLayout=column). All other styles must be done with CSS by the SPA developer.

See SHA 9f7137e for detals

[Jonatthu]

@ThomasBurleson is not working, because margin left is breaking the columns when is 25% to be instead of 4 to 3 columns now happening in beta 4, maybe you should read the post, I'm talking about when you use fxLayoutGap and fxLayoutWrap please open the issue again

[macjohnny]

@ThomasBurleson this is actually something that should be improved in flex-layout, since the first element gets margin-left: 0px, which makes it impossible to apply the correct style with css.

here is the very simple solution to this issue:
apply margin-left: xx px to all elements of a child with fxLayoutGap, add a wrapper around the children with a margin-left: -xx px. that's it.

what do you think about this?

[ThomasBurleson]

@Jonatthu, @macjohnny - plz retry with the latest code for HEAD on master. The API does not do anything with margin-left.

[macjohnny]

@ThomasBurleson this shifts the problem to the right side, since the element wraps too early, i.e. it should "ignore" the margin-right for the last element in the row (not necessarily the very last element). the proposed solution also works for margin-right.

[Jonatthu]

@ThomasBurleson This only applies when we are using fxLayoutWrap and fxLayoutGap
for make columns if we try to do columns of 4 with a fxFlex="25%" this will give us columns of 3 instead of 4 because the margin-left

[Jonatthu]

@ThomasBurleson I insist this should be open again, #9f7137e is not resolving this issue

[macjohnny]

@Jonatthu this is the behaviour of the "too early wrap" I described in #165 (comment)

[Jonatthu]

@macjohnny yes I know, right know I'm fixing the issue manually with css but this should not be like this, is more easily if angular flex box handle this when is applying fxLayoutWrap

[macjohnny]

@Jonatthu you are right, i am also in favour of flex-layout fixing this issue.

[ThomasBurleson]

@Jonatthu - To paraphrase what you are saying:

@see http://plnkr.co/edit/PPipIXcjb87YsdRQJw8r?p=preview

The intent is to display 4 cells / row. Using margins for gaps interferes with the layout and wrapping.

---

The issue here is that the fxLayoutGap cannot use padding inside the child items. That may interfere with the layouts within those child items. And using margin + wrap has the above possible issues.

I am not aware of any solution that adequately solves this problem. You would have the same issues using manually constructed FlexBox CSS.