Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1305

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

$
0
0

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

2:enter image description here

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

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?


Viewing all articles
Browse latest Browse all 1305

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>