Creating a layout with a fixed header, fixed sidebar, fixed content section using Angular Material / Flex-Layout in Angular

12
votes

I am using Angular w/ Angular Material and Flex Layout

I am attempting to create a layout for a web application that is exactly like this site. Notice the fixed header, fixed sidebar, fixed content pain. No browser scrolling is used, only div scrolling and fits perfectly in the browser viewport.

Here is the html I am using to give me my basic structure:

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>

Additionally I set the following styles:

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
md-sidenav-container, .main-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

I noticed that without the toolbar on the page everything works perfectly. So then I added a padding-bottom: 64px; to the md-sidenav-container, .main-content classes. It seems like it fixed it for the content, but not the sidenav. The sidenav scrollbar still goes way below the browser window.

I do have flex-layout installed to my Angular app if anyone can tell me how to do it with the flex directives. Otherwise, plain css would be fine too.

4
cssangularflexboxangular-material2angular-flex-layout
I would suggest using an absolute positioned sidenav with a div that is positioned relative inside it. Then overflow scroll/auto the relative div. This will save you from the height mismatch issue. – rjustin
Do you have a working example? I think so too thats its a problem with the wrong container overfloating... but i would need to see and test it live... – ToTaTaRi

4 Answers

5
votes

You can check working example at https://angular-material2-issue-dgcx3j.stackblitz.io/

It's not completely as same as you've requested (it has extra functionality). The sidebar is fixed on big screens, hides responsively on small screens and shows the menu button on toolbar.

You can review the code at https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts

Also you can find the source code of Angular Material Docs Site (the one you've asked the same functionality) at https://github.com/angular/material.angular.io

2
votes

You may try this code

html

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" opened="true">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
     <div class="my-content">Main content</div>
  </div>

</md-sidenav-container>

css

.example-container {
  width: 500px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 20px;
}

.my-content{
  height:1200px;
}

and heres the Plunker link : https://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview

0
votes

This is what you are looking for 

html,
body {
  width: 100%;
  height: 100%;
}

mat-sidenav-container {
  width: 100%;
  height: calc(100% - 64px);
}
<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
<md-sidenav-container>
  <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
  <div class="my-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-container>
0
votes

With the latest Angular Material (7.2) it should work out of box. 

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>