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:
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:
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?