Setting the rowHeight of a single tile in mat-grid-list (Angular 6)

Question

I have an mat-grid-list that contains an n number of mat-card items. At the bottom of the grid, I want to add my own custom paginator that is centred within the page (for various reasons I don't want to use the mat-paginator if at all possible).

I've tried simply adding a <div> element underneath the mat-grid-list element and setting the margin to 0 auto; (which is what I'd normally do to centre a div) but that doesn't seem to work (the paginator remains stubbornly left-aligned).

I can add a new tile to the mat-grid-list that appears after all the other tiles and set its [colspan] equal to the number of columns. When I do this, I get a perfectly centred paginator except that there is a huge amount of excess height (presumably because it is using the height of the other mat-grid-tile items which are quite large).

Is there a way to either: a) get the paginator to center-align in its own div or b) change the rowHeight of a single mat-grid-tile so I don't end up with a ridiculous amount of white space around the paginator? Markup is below:

mat-grid-list with paginator in div

<div *ngIf="dataModel" class="container page-content">
  <mat-grid-list cols="5">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title>{{ page.title }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          {{ page.matches }}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
  <div class="paginator">
    <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
      <mat-icon aria-label="Previous">navigate_before</mat-icon>
    </button>
    <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
      <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
    </ng-container>
    <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
      <mat-icon aria-label="Next">navigate_next</mat-icon>
    </button>
  </div>
</div>

CSS for .paginator class

.paginator {
  margin: 0 auto;
  padding-top: 20px;
}

(Note: I've also tried setting display to inline-block and the width to 100% and neither worked).

mat-grid-list with paginator in a separatemat-grid-tile`

<div *ngIf="dataModel" class="container page-content">
  <mat-grid-list cols="5">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title>{{ page.title }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          {{ page.matches }}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="5">
      <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
        <mat-icon aria-label="Previous">navigate_before</mat-icon>
      </button>
      <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
        <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
      </ng-container>
      <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
        <mat-icon aria-label="Next">navigate_next</mat-icon>
      </button>
    </mat-grid-tile>
  </mat-grid-list>
</div>

RedDree RedDree · Accepted Answer · 2018-08-24T14:35:42

You could try setting the rowspan of the separate tile to, for example, .5 (or anything that fits better). I'm not sure it works with this syntax, but it works in my case, where I set rowHeight on the mat-grid-list explicitly and use rows: .5 for the particular tile in the tiles list.

Setting the rowHeight of a single tile in mat-grid-list (Angular 6)

1 Answers