I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music.
The issue is that the height of the div containing the content varies based on the visited link, causing the ngx-audio-player to move up and down accordingly. I want to ensure that the audio player remains at the bottom of the screen, leaving space for a side navigation menu on the left side.
I need a solution where only the content div will scroll if it exceeds the screen height, without affecting the position of the audio player.
To achieve this, here is the CSS snippet along with the HTML structure:
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
.router-link-active{
background-color: #aaa7b4;
}
.example-spacer {
flex: 1 1 auto;
text-align: center;
}<mat-sidenav-container class="sidenav-container" >
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list *ngIf="!anyrole">
<a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item" routerLinkActive="router-link-active"> {{item | titlecase}} </a>
</mat-nav-list>
<mat-nav-list *ngIf="anyrole">
<a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/admin/'+item" routerLinkActive="router-link-active"> {{item | titlecase}} </a>
<amplify-sign-out></amplify-sign-out>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span >Organization Name</span>
<mat-form-field *ngIf="!orgName" class="example-spacer" appearance="fill">
<mat-label >Select School</mat-label>
<mat-select name="schoolId" [(ngModel)]="selectedSchool" (selectionChange)="refreshId($event.value)">
<mat-option *ngFor="let school of facilitatorSchool" [value]="school.id">
{{school.name}}
</mat-option>
</mat-select>
</mat-form-field>
<span *ngIf="orgName" class="example-spacer">{{orgName}}</span>
<span >Hi {{currentUserName}}</span>
</mat-toolbar>
<router-outlet></router-outlet>
<app-player fixedInViewport></app-player>
</mat-sidenav-content>
</mat-sidenav-container>