CODEWITHSUNDEEP
cssangularangular-material2
user1935987
user1935987

Reputation: 3347

angular material mat-grid-tile height

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?

Upvotes: 10

Views: 27951

Answers (1)

user1935987
user1935987

Reputation: 3347

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>

Upvotes: 12

Related Questions