I'm having trouble scrolling down my mat-sidenav-content to reach the bottom where my pagination is located. When I try using fullscreen on mat-sidenav-container, my mat-toolbar disappears. How can I adjust my mat-sidenav-content based on the content? Check out the image below:
https://i.stack.imgur.com/w8KkX.jpg
author.component.html
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened>
<mat-list class="mt-5">
<mat-list-item><mat-icon class="me-2">book</mat-icon><a routerLink="/book">Book</a></mat-list-item>
<mat-divider></mat-divider>
<mat-list-item><mat-icon class="me-2">supervisor_account</mat-icon><a routerLink="/author">Author</a></mat-list-item>
<mat-divider></mat-divider>
<mat-list-item><mat-icon class="me-2">local_offer</mat-icon><a routerLink="/category">Category</a></mat-list-item>
<mat-divider></mat-divider>
<mat-list-item><mat-icon class="me-2">folder_shared</mat-icon><a routerLink="/publisher">Publisher</a></mat-list-item>
</mat-list>
</mat-sidenav>
<!-- Main Content -->
<mat-sidenav-content id="content">
<mat-card class="header mat-elevation-z5">
<mat-card-title class="mt-2">Author</mat-card-title>
<button mat-raised-button color="warn" class="add-button" (click)="openAddModal()">Add new</button>
</mat-card>
<br>
<div class="example-container float-end">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Filter</mat-label>
<input matInput placeholder="Search...">
</mat-form-field>
</div>
<br>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Price Column -->
<ng-container matColumnDef="authorname">
<th mat-header-cell *matHeaderCellDef> Author </th>
<td mat-cell *matCellDef="let element"> {{element.authorname}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button mat-raised-button color="primary" (click)="updateClick()">Edit</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="mat-elevation-z5" [pageSize]="10"
[pageSizeOptions]="[10, 25, 50, 75, 100]"
showFirstLastButtons
aria-label="Select page">
</mat-paginator>
</mat-sidenav-content>
</mat-sidenav-container>
author.component.css
#content {
width: 82%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
background: rgb(240, 237, 237);
}
mat-sidenav-container {
height: 100%;
}
mat-sidenav {
width: 18%;
background-color: #fff;
}
mat-list-item a {
text-decoration: none;
color: #000;
}