CODEWITHSUNDEEP
cssangularflexboxangular-material2angular-flex-layout
Blake Rivell
Blake Rivell

Reputation: 13875

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

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.

Upvotes: 14

Views: 6912

Answers (4)

Ashish
Ashish

Reputation: 14707

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>

Upvotes: 0

Mike Trinh
Mike Trinh

Reputation: 1303

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>

Upvotes: 0

i3lai3la
i3lai3la

Reputation: 980

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

Upvotes: 2

Halil İbrahim Karaalp
Halil İbrahim Karaalp

Reputation: 1300

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

Upvotes: 8

Related Questions