The Add button does not align to the right

[datauduong]

Hi,

I have downloaded the project and try and also follow the step 1-10, I couldn't get the Add button to appear to the right (Nothing appear)

app.component.html
<button mat-fab (click)="openAdminDialog()" class="fab-bottom-right">
add

app.component.css
.fab-bottom-right {
position: fixed;
right: 16px;
bottom: 16px;
}

with out .fab-bottom-right css, the button appeared on the bottom left hand side.
Thanks.
Regards Dat.

[datauduong]

I have copy the button code to another angular test page it is working, something is interfered with the button visibility.

app.component.css
:host {
display: flex;
flex: 1;
}

mat-sidenav {
width: 320px;
}

:host /deep/ .mat-list-item-content {
height: 100% !important;
}

.content {
padding: 12px;
}

mat-list-item mat-icon {
overflow: hidden;
width: 64px;
height: 64px;
/* border-radius: 50%; */
margin: 12px;
}

.mat-sidenav-content {
transform: none !important;
}

.fab-bottom-right {
position: fixed;
right: 16px;
bottom: 16px;
}

[datauduong]

When I am making the windows smaller, I can see the button moving up.