In my layout, I have a container that includes two sidenavs and multiple tables in between them. When I toggle the left sidenav, instead of the expected behavior where the content shrinks to accommodate the sidenav, the tables get pushed to the right as if using mode="push" even though mode="side" is specified for this sidenav. This leads to inconsistent behavior that I need to address.
Upon further investigation, I noticed that when toggling the sidenav open, the tables gain a margin-left of 350px but their width (1870px) remains unchanged. This does not align with the expected behavior for mode="side":
https://i.sstatic.net/vJZst.png
Any ideas on how to solve this issue?
Here's the HTML code snippet for reference:
<mat-sidenav-container id="grid-container" class="grid-container">
<mat-sidenav class="sidenavSearch" id="sidenavSearch" #sidenavSearch [opened]="false" mode="side" position="start">
<app-patient-search [requestEnabled]="requestEnabled" (requestClick)="request()"></app-patient-search>
<!-- removed for now <app-history></app-history> -->
</mat-sidenav>
<mat-sidenav-content id="result" class="result">
<div class="toggleSearch">
<button class="toggleSearch" id="toggleSearch" mat-button (click)="sidenavSearch.toggle()"><mat-icon>search</mat-icon></button>
</div>
<div>
<div class="title mat-headline padding" i18n="@@search:request:result">
Result
<!-- some tables -->
</div>
</div>
<div>
<button class="toggleOptions" id="toggleOptions" mat-button (click)="sidenavOptions.toggle()"><mat-icon>settings</mat-icon></button>
</div>
</mat-sidenav-content>
<mat-sidenav class="sidenavOptions" id="sidenavOptions" #sidenavOptions [opened]="true" mode="over" position="end">
<app-options></app-options>
</mat-sidenav>
</mat-sidenav-container>
And here is the corresponding CSS code snippet:
.grid-container {
display: grid;
grid-template-columns: [searchToggle]25px [result]auto [optionsToggle]25px [end];
width: 100%;
}
.toggleSearch {
grid-column-start: searchToggle;
grid-column-end: result;
justify-self: end;
}
.teest {
width: 25px;
}
.result {
grid-column-start: result;
grid-column-end: optionsToggle;
width: 100%;
}
.toggleOptions {
grid-column-start: optionsToggle;
grid-column-end: end;
justify-self: center;
position: absolute;
}
.table-container:not(:last-child) {
margin-bottom: 20px;
}
.title {
align-items: center;
background-color: #315A9A;
color: white;
}
.table-title {
background-color: #8d8d8d;
color: white;
}
.padding {
padding-left: 20px;
padding-right: 20px;
}
#sidenavOptions {
border-left: 1px solid black;
box-shadow: 1px 0 2px grey;
width: 250px;
}
#sidenavSearch {
border-right: 1px solid black;
box-shadow: 1px 0 2px grey;
width: 350px;
}