CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
user13614125
user13614125

Reputation:

Angular X items per row and column

I've been trying to make this work for 2 hours. I'm trying to display some buttons on the screen. You can see what they look like currently below. They are a lot, so they look off, and I can't get them to look right. I want to have 10 evenly spaced buttons per row and 20 per column. Also, I want it to wrap for smaller screens. I searched but couldn't find an exact solution to my problem. I tried it with angular-flex-layout but I couldn't do it, so I have given up on that. How can I achieve this in another way? With css maybe?

enter image description here

 <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="mr-8">format_list_numbered</mat-icon>
                        Cell Buttons
                    </ng-template>
                    <div fxLayout="row wrap" fxLayout.xs="column wrap" fxFlex.gt-xs="90%" [fxFlex.gt-md]="regularDistribution" fxLayoutAlign="space-evenly start">
                        <button mat-button class="fuse-white-fg" [class.green]="!prm.PackageCount" [class.red]="prm.PackageCount"
                            *ngFor="let prm of cell" [routerLink]="'/terminal/cell/'+prm.CellId">Package Count: {{prm.PackageCount}}
                        </button>
                    </div>
                </mat-tab>

Upvotes: 0

Views: 1035

Answers (2)

Vitaliy Kuznetsov
Vitaliy Kuznetsov

Reputation: 83

In fact, flex works very simply. Try it like this:

<style type="text/css">
  .wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .button-place {
    padding: 5px;
  }

  button {
    flex: 0 0 10%;
  }
</style>

<div class="wrap">
  <div class="button-place" *ngFor="let prm of cell">
    <button mat-button class="fuse-white-fg" [class.green]="!prm.PackageCount" [class.red]="prm.PackageCount"  [routerLink]="'/terminal/cell/'+prm.CellId">Package Count: {{prm.PackageCount}}
    </button>
  </div>
</div>

If you need it for a small screen, then use @media:

@media (max-width: 800px) {
  button {
    flex: 0 0 20%;
  }
}

EDIT: added an wrap with padding

Upvotes: 2

David Fontes
David Fontes

Reputation: 1508

You could te CSS grid. Try the following CSS code.

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 is the number of items per column */
  grid-template-rows: repeat(20, 1fr);  /* 20 is the number of items per row */
  gap: 15px; /* The gap between the row and columns */
}

@media (max-width: 500px) {
  .container {
    grid-template-columns: repeat(5, 1fr);
  }
}

You don't have to use both the CSS properties grid-template-columns and grid-template-rows, you can use just the one you need.

Upvotes: 1

Related Questions