Angular 5 - Material Snackbar not work properly - css

Question

SnackBar takes up the complete page height. I don't know what the problem is, see screenshot below.
And here is my code:
agentsmanagement.component.css
button {
margin: 2px;
}
.selected{
background:lightgray;
}
.example-sidenav {
padding: 20px;
}
.example-sidenav-content {
display: flex;
height: 100%;
width: 100%;
align-items: start;
justify-content: center;
}
.btn-list {
margin: 20px;
}
mat-header-cell {
background-color:#B31B1B;
color: white;
}
agentsmanagement.component.html
<standard-page>
<div>
<form>
<div fxLayout="row">
<div fxFlex>
<h1 mat-dialog-title color="primary" fxLayoutAlign="center">
Agent Management
</h1>
</div>
<div fxFlex="25" fxLayoutAlign="start">
<mat-form-field>
<input matInput placeholder="Search">
</mat-form-field>
</div>
</div>
</form>
</div>
<div mat-dialog-content>
<div class="properties">
<div fxFlex fxLayout="row" id="list-property" fxLayoutAlign="center">
<div fxFlex="95" fxLayout="column" fxLayoutAlign="none" class="mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef mat-sort-header>
{{column.value}}
</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="agentInfo"></mat-header-row>
<mat-row *matRowDef="let row; columns: agentInfo;" [ngClass]="{ 'selected': selection.isSelected(row)}"
(click)="selection.toggle(row)"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>
<div fxFlex="10" fxLayout="column" fxLayoutAlign="none" class="btn-action">
<div>
<button mat-mini-fab color="primary" class="mat-elevation-z4" (click)="showAddAgent()">
<mat-icon class="icon">add</mat-icon>
</button>
</div>
<div>
<button mat-mini-fab color="primary" class="mat-elevation-z4" (click)="showEditAgent()">
<mat-icon class="icon">create</mat-icon>
</button>
</div>
<div>
<button mat-mini-fab color="accent" class="mat-elevation-z4" (click)="showDeleteAgent()">
<mat-icon class="icon">delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
</standard-page>
agentsmanagement.component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import {
MatTableDataSource, MatSort,
MatDialog, MatDialogRef,
MatSnackBar, MatPaginator,
Sort
} from '#angular/material';
import { SelectionModel } from '#angular/cdk/collections';
import { PopupAgentComponent } from "../dialogs/popup-agent/popup-agent.component";
#Component({
selector: 'app-agentsmanagement',
templateUrl: './agentsmanagement.component.html',
styleUrls: ['./agentsmanagement.component.css']
})
export class AgentsmanagementComponent implements OnInit {
tableArr: Element[] = [{ Code: 123153325, AgentName: 'Jun Mar', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun#gmail.com' },
{ Code: 123153325, AgentName: 'Jay Jay', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun#gmail.com' },
{ Code: 123153325, AgentName: 'Paano Mo Nasabi', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: '' },
{ Code: 123153325, AgentName: 'Walang Poreber', AgentType: 'Cooperate', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun#gmail.com' },
{ Code: 123153325, AgentName: 'Polano Decaprio', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun#gmail.com' },
{ Code: 123153325, AgentName: 'Pedodido Tak', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun#gmail.com' }
];
#ViewChild(MatSort) sort: MatSort;
#ViewChild(MatPaginator) paginator: MatPaginator;
dialogRef: MatDialogRef<PopupAgentComponent>;
data = Object.assign(this.tableArr);
selection = new SelectionModel<Element>(false, null);
agentInfo = [];
dataSource = new MatTableDataSource<Element>(this.tableArr);
columnNames = [{
id: "Code",
value: "Code"
}, {
id: "AgentName",
value: "Agent Name"
},
{
id: "AgentType",
value: "Agent Type"
},
{
id: "Contact",
value: "Contact"
},
{
id: "Address",
value: "Address"
},
{
id: "Email",
value: "Email"
}];
constructor(
public dialog: MatDialog,
public snackBar: MatSnackBar,
) {
}
ngOnInit() {
this.agentInfo = this.columnNames.map(x => x.id);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
});
}
showAddAgent() {
this.dialogRef = this.dialog.open(PopupAgentComponent, {
disableClose: true,
width: '680px',
height: '580px'
});
}
showEditAgent() {
if (this.selection.isEmpty()) {
this.openSnackBar("Please select one Agent to Update", "");
} else
this.dialogRef = this.dialog.open(PopupAgentComponent, {
disableClose: true,
width: '680px',
height: '580px'
});
}
showDeleteAgent() {
if (this.selection.isEmpty()) {
this.openSnackBar("Please select one Agent to Delete", "");
} else {
this.selection.selected.forEach(item => {
let index: number = this.data.findIndex(d => d === item);
this.dataSource.data.splice(index, 1);
this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
});
this.selection = new SelectionModel<Element>(true, []);
}
}
}
export interface Element {
Code: number,
AgentName: string,
AgentType: string,
Contact: string,
Address: string,
Email: string
}
What is the problem of with my SnackBar?. I've tried to fix it but it didn't work. I've tried to look at the console but it has no error.
I want it to look like the example from the Angular Material documentation:
SnackBar with proper height