angular material mat-grid-tile height
17,723
Solved by splitting rows into smaller. Increasing [rowspan]
and decreasing rowHeight
.
i.e.:
<mat-grid-list [cols]="6" rowHeight="4rem">
<mat-grid-tile [colspan]="2" [rowspan]="4">
<mat-card class="dashboard-card">
something
</mat-card>
</mat-grid-tile>
<mat-grid-tile [colspan]="6" [rowspan]="1">
<mat-card class="dashboard-card">
something
</mat-card>
</mat-grid-tile>
<mat-grid-tile [colspan]="6" [rowspan]="4">
<mat-card class="dashboard-card">
something
</mat-card>
</mat-grid-tile>
</mat-grid-list>
Author by
user1935987
Updated on June 08, 2022Comments
-
user1935987 about 2 years
Angular 6+
Angular Material 6+
I want a single
mat-grid-tile
to have lower height compare to other tiles. Trying to do this by setting[rowspan]=".3"
property. It does make the tile and it's content height smaller, but the space between this "smaller" tile and the next one is still as if the tile had[rowspan]="1"
. setting the next tile's[rowspan]=".7"
doesn't fix it - they still the same space of full height row each.<mat-grid-list [cols]="6" rowHeight="16rem"> <mat-grid-tile [colspan]="2" [rowspan]="1"> <mat-card class="dashboard-card"> something </mat-card> </mat-grid-tile> <mat-grid-tile [colspan]="4" [rowspan]="1"> <mat-card class="dashboard-card"> something </mat-card> </mat-grid-tile> <mat-grid-tile [colspan]="6" [rowspan]=".3"> <mat-card class="dashboard-card"> something </mat-card> </mat-grid-tile> <mat-grid-tile [colspan]="6" [rowspan]="1"> <mat-card class="dashboard-card"> something </mat-card> </mat-grid-tile> </mat-grid-list> .dashboard-card { width: calc(100% - 60px); height: calc(100% - 60px); }
What is the correct way to do so / how to solve a problem described above?