Flex-layout: Space between fxFlex not work with fxLayoutWrap and fxLayoutGap?

[henriqueweiand]

I'm using layout-flex to format the fields of a form and in this format I have the following problem:

Code:

Should not the spacing applied by fxLayoutGap be between the elements? So in the example above what should happen would not be a reduction of the first two fxFlex = "50" to contain the spacing and still mater in only one line?

[mackelito]

What happens if you wrap each inside a div?

[henriqueweiand]

You mean like that?

The result is the same ... :(

[mackelito]

I think it´s a good idea to seperate material components and layout.
Try putting all fx* attributes to divs and have the material components inside..

something like this:

<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
  <div class="product-wrapper" fxLayoutAlign="strech" fxFlex="50">
    <md-card></md-card>
  </div>
  <div class="product-wrapper" fxLayoutAlign="strech" fxFlex="50">
    <md-card></md-card>
  </div>
  <div class="product-wrapper" fxLayoutAlign="strech" fxFlex="50">
    <md-card></md-card>
  </div>
</div>

[MiguelAngelLV]

I have the same problem.

I see that fxFlex="50" add "max-width=50%" to the style and fxLayoutGap="25px" to the margin...

So, (50% + 25px) * 2 = 100% + 50px

[ThomasBurleson]

Please refer to the fxLayoutGap Wiki Docs.

Rendered Layout without gap considerations:

Rendered Layout *WITH gap considerations:

---

```html

<md-card-content>
  <div fxLayout fxLayout.xs="column" fxLayoutWrap fxLayoutGap="25px">
    <md-input-container fxFlex="calc(50%-25px)">
      <input mdInput placeholder="Name">
    </md-input-container>
    <md-input-container fxFlex="calc(50%-25px)">
      <input mdInput placeholder="Occupation">
    </md-input-container>
    <md-input-container fxFlex="calc(50%-25px)">
      <input mdInput placeholder="Compnay">
    </md-input-container>
  </div>
</md-card-content>

<md-card-actions>
  <button md-button>Anterior</button>
  <button md-button>Proximo</button>
</md-card-actions>

[ThomasBurleson]

Works as expected.

[henriqueweiand]

Right @ThomasBurleson , but in his example, should the occupation of the "company" field not have applied the same calculation? Why are you taking 100%?

[awhitehouse104]

@ThomasBurleson In your example, you have fxFlex="calc(50% - 25px)" for 3 fields, and one of them takes up the full width. Why would that be expected?

[ThomasBurleson]

@awhitehouse104

• fxLayoutGap does not apply a margin-right to the last element.
• fxLayout="calc(50% - 25px);" applies the following css:

  flex: 1 1 calc(50% - 25px);
  min-width: calc(50% - 25px);

So the flex-basis is calc(50% - 25px) which applies constraints after the element default content sizing is determined.

Here is the StackBlitz Demo for this.

If you have any suggestions on how to improve this... we would be interested.

---

Reopening based on user votes ;-)

[awhitehouse104]

@ThomasBurleson Thanks for the quick response. I do think it's non intuitive and it also creates an issue where the inputs don't quite line up correctly (you can see how Company in the example extends further than the others and it's even more obvious when there are 4 inputs rather than 3). I don't have a solution yet but I'll play around with it.

[CaerusKaru]

Should be fixed by #667. Please take a look at the PR and add any comments you might have there. You can pull from the remote branch and build the library to test in your own apps.

[blogcraft]

fxLayoutGap and wrap leave an anoying margin at the end of the rows.

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>

[webia1]

Suggestion: fxLayoutGap should be taken into account out of the box, without the necessity to calculate anything anew manually. All these extra efforts simply make the code illegible.

If I have two div boxes with 50% width, I mean 50% of the remainder:

i. E. 50% of `current-screen-width` - `fxLayoutGap`.

In my humble opinion, such a thing would be really intuitive, what do you think?

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

<sub>_This action has been performed automatically by a bot._</sub>