Currently, I'm in the process of creating a responsive Angular application.
Is there any way to adjust the height and position of the
<mat-sidenav-content></mat-sidenav-content>I attempted to use CSS for this purpose, but it didn't yield the expected results.
For instance, in JavaScript:
const box = document.getElementById('box');
box.style.position = 'absolute';
box.style.top = '150px';
box.style.left = '150px';
I am looking to dynamically set the height of both the <mat-sidenav> and <mat-sidenav-content> components upon page load.
The desired layout should resemble this:
https://i.sstatic.net/Tv1kS.jpg
However, my current layout looks like this:
https://i.sstatic.net/AO1jG.jpg
Below is the code snippet:
<header>
<mat-toolbar color="primary">
<button (click)="snav.toggle()" mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="mat-toolbar-spacer"></span>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voice mail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
</mat-toolbar>
</header>
<mat-sidenav-container class="mat-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav #snav [opened] = "!mobileQuery.matches" [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content #matSidenavContent >
<p *ngFor="let content of fillerContent">{{content}}</p>
</mat-sidenav-content>
</mat-sidenav-container>
<!-- Additional styling -->
.mat-toolbar-spacer {
flex: 1 1 auto;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 100;
display: flex;
}
footer {
height: auto;
background-color: #F5F5F5;
text-align: center;
padding: 20px 0px 20px 0px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
mat-sidenav-container {
background-color: #FFFFFF;
height: auto;
overflow: auto;
}
mat-sidenav{
margin-top: 65px;
position: fixed;
margin-bottom: 60px;
}
mat-sidenav-content{
padding: 20px;
margin-top: 60px;
overflow: auto;
/*height:520px;*/ /* i don't want to set it here */
height:100%;
}
mat-nav-list{
width: 250px;
padding: 5px;
}
mat-nav-list mat-list-item{
width: 100%;
padding-right: 100px;
}
@media (max-width: 767.98px) {
mat-nav-list{
margin-top: 0px;
width: auto;
}
mat-sidenav{
margin-top: 0px;
margin-bottom: 0px;
}
mat-sidenav-content{
padding: 20px;
margin-top: 0px;
height:auto;
}
footer {
position:initial;
left:initial;
bottom: initial;
}
}