I want to position my pagination at the bottom-center of the page using Angular Material's mat-paginator component.
Currently, this is what it looks like:
1: https://i.sstatic.net/21mUj.png
2: https://i.sstatic.net/kfXH6.png
The issue I'm facing is that the mat-paginator appears above my mat-accordion on the left side instead of being centered at the bottom with the flow of the page.
This is the code I am using:
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: This is how it currently looks: https://i.sstatic.net/95m05.png
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;
}
Now, I am looking for a way to make the pagination appear at the bottom by default. How can I achieve this?