How can I align pagination to bottom-center of screen?

user_10357569 0
Viewed 12046

I'm trying to put my pagination in the bottom-center of the page and using Angular Material mat-paginator component.

This is the result right now:

1: [![enter image description here][1]][1]

2: [![enter image description here][2]][2]

As you can see the mat-paginator now is going above my mat-accordion and it's not going down with the flow of the page, and it's on the left side instead of the center.

This is my code:

HTML:


    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <mat-accordion multi="true" *ngIf="posts.length > 0 && !isLoading">
      <mat-expansion-panel *ngFor="let post of posts">
        <mat-expansion-panel-header>
          {{ post.title }}
        </mat-expansion-panel-header>
        <p>{{ post.content }}</p>
        <div class="post-image">
          <img [src]="post.imagePath" [alt]="post.title">
        </div>
        <mat-action-row>
          <a mat-button color="primary" (click)="onEdit(post.id)">EDIT</a>
          <button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
        </mat-action-row>
      </mat-expansion-panel>
    </mat-accordion>
    <div class="mat-page">
      <mat-paginator [length]="totalPosts" [pageSize]="PostsPerPage" [pageSizeOptions]="pageSizeOptions" (page)="onChangePage($event)"
        *ngIf="posts.length > 0 "></mat-paginator>
    </div>
    <p class="info-text mat-body-1" *ngIf="posts.length <= 0 && !isLoading">No posts added yet!</p>

CSS:

    :host {
      display: block;
      margin-top: 1rem;
    }
    
    .info-text {
      text-align: center;
    }
    
    .post-image {
      width: 50%;
    }
    
    .post-image img {
      width: 100%;
      border: 2px solid rgb(202, 202, 202);
    }
    
    mat-paginator {
      position: absolute;
      bottom: 0;
      text-align: center;
      margin: 0 auto;
    }

Update: That is the result right now: [![enter image description here][3]][3]

CSS:

    :host {
      display: block;
      margin-top: 1rem;
    }
    
    .info-text {
      text-align: center;
    }
    
    .post-image {
      width: 50%;
    }
    
    .post-image img {
      width: 100%;
      border: 2px solid rgb(202, 202, 202);
    }
    
    mat-paginator {
      display: flex;
      justify-content: center;
    }

My question now is how can I set the pagination to be in the bottom by default? [1]: https://i.stack.imgur.com/21mUj.png [2]: https://i.stack.imgur.com/kfXH6.png [3]: https://i.stack.imgur.com/95m05.png

flexbox angular-material angular css pagination
2 Answers

Angular HTML Template

<mat-paginator
  *ngIf="totalRecords"
  [length]="totalRecords"
  [pageSize]="pageSize"
  [pageIndex]="0"
  [pageSizeOptions]="pageSizeOptions"
  [showFirstLastButtons]="true"
  (page)="setPagination($event)">
</mat-paginator>

CSS/SCSS

All you need to do is override the mat-paginator class to have display: flex; and justify-content values that blend into the inherited styles from Angular Material.

.mat-paginator {
  display: flex;
  justify-content: center;
}
user_21979750

To set it to bottom you can try the following:

First, make the host to display as flex instead of block

:host {
  display: flex;
  flex-direction: column;
}

Then, set the accordion to take the whole available space all the time:

mat-accordion {
  flex-grow: 1;
}

You can read more about flex spacings here

user_58488000
Related