CODEWITHSUNDEEP
htmlangularlayout
jauche
jauche

Reputation: 71

Angular: how to force elements to go on a new row?

I have a HTML page for a component, and I'd like to force elements from array to go on a new row, using fxLayout.
For example, I have a list with 11 elements, I want to have 5 elements on the first row, 5 on a second row then the last one on a third row.

EDIT: The number of elements per row shouldn't be established, so that it can change depending on screen size. Now I can have a set number of elements per row but it doesn't change except with a very small screen.

How can I do that?
That's my code:

<div class="boards" fxFlexWrap="wrap" fxLayoutGap="1em" fxLayout="row">
  <mat-card fxFlex fxLayoutAlign="center" *ngFor="let board of boards | async">
    {{board.name}}
  </mat-card>
</div>

SOLVED

Upvotes: 0

Views: 2235

Answers (2)

ysf
ysf

Reputation: 4874

you can set fxLayout="row wrap" on flex container and set fxFlex="20%" on flex items (child elements)

<div fxLayout="row wrap">
  <div fxFlex="20%" *ngFor="let item of items">
    {{item}}
  </div>
</div>

since you are setting a flex gap you should also take that into account for flex items' width.

<div fxLayout="row wrap" fxLayoutGap="1em">
  <div fxFlex="0 0 calc(20% - 1em)" *ngFor="let item of items">
    {{item}}
  </div>
</div>

and if you want to get rid of gap at the end of each line you need a little css trick

<div class="boards" fxLayout="row wrap" fxLayoutGap="1em">
  <div fxFlex="0 0 calc(20% - 0.8em)" *ngFor="let item of items">
    {{item}}
  </div>
</div>

with

.boards :nth-child(5n){
  margin-right: 0 !important;
}

here is a working demo https://stackblitz.com/edit/angular-unxtaq

Upvotes: 1

nitin9nair
nitin9nair

Reputation: 598

Try this:

HTML

<div class="boards" fxFlexWrap="wrap" fxLayoutGap="1em" fxLayout="row">
 <mat-card class="custom-card" fxFlex fxLayoutAlign="center" *ngFor="let board of boards | async">
    {{board.name}}
  </mat-card>
</div>

CSS(styles.css)

.custom-card {
  width: 20% !important;
  display: inline-block !important;
  position: relative !important;
}

Upvotes: 0

Related Questions