I set up a layout with a toolbar at the top, a sidenav on the left, and the remaining space for content.
The sidenav consists of a searchbox and a list of items. My goal is to have the sidenav's height match the row it's placed in, allowing the list to overflow and scroll within that defined height. However, I'm having trouble getting the inner scroll to function as desired, as the inner component's height exceeds the containing div's height and setting height: 100% isn't working.
Current display:
https://i.sstatic.net/oz1Gn.png
You can see that the entire left component is overflowing (I intend to eliminate the outer scroll using overflow: hidden), and the inner component expands to full size while the list doesn't adhere to the component's height limitations or its parent div's height.
Here are the HTML and CSS scripts:
logs.component.html
<div class="container">
<div class="row">
<div class="col-3" color="primary" class="sidebar-container">
<app-search-sidebar (selectedChanged)="selected=$event" [items]="items"></app-search-sidebar>
</div>
<div class="col">
<md-tab-group>
<md-tab [label]="selected">
<h1>{{selected}}</h1>
<p>...</p>
</md-tab>
</md-tab-group>
</div>
</div>
</div>
logs.component.css
.row {
width: 100%;
margin: 0;
}
.row > .col* {
padding: 0;
}
.container {
display: flex;
height: 100%;
width: 100%;
padding: 0;
min-height: calc(100% - 64px);
max-height: calc(100% - 64px);
}
app-search-sidebar {
overflow-y: auto;
display: block;
height: 100%;
}
.sidebar-container {
min-width: 300px;
/*max-width: 300px;*/
}
.container > md-tab-group {
margin-left: 10px;
flex: 1;
}
search-sidebar.component.html
<div style="padding: 10px">
<label class="sr-only" for="processName">Process Name</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">
<md-icon>search</md-icon>
</div>
<input type="text" [(ngModel)]="searchValue" class="form-control" id="processName" placeholder="Process Name">
</div>
<md-grid-list cols="1" rowHeight="40px" style="margin-top: 5px; overflow: scroll">
<md-grid-tile *ngFor="let item of items | listFilter:searchValue" colspan="1" rowspan="1">
<button md-raised-button [color]="isSelected(item) ? 'primary' : ''" class="process-name" (click)="changeSelected(item)">
{{item}}
</button>
</md-grid-tile>
</md-grid-list>
</div>
search-sidebar.component.css
.process-name {
width: 100%;
color: white;
text-align: center;
border-radius: 4px;
}
md-grid-list {
min-height: calc(100% - 24px);
max-height: calc(100% - 24px);
}