Skip to content

Instantly share code, notes, and snippets.

@epelc

epelc/gist:6aa345f4496776569830

Created January 6, 2015 21:13
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save epelc/6aa345f4496776569830 to your computer and use it in GitHub Desktop.
Save epelc/6aa345f4496776569830 to your computer and use it in GitHub Desktop.
Download ZIP
Angular-material: Sidebar and content full height example
Raw
gistfile1.html
<!DOCTYPE html>
<html ng-app="your-app" lang="en">
<head>
<!-- imports title appcache etc -->
</head>
<body layout="column">
<div layout="row" ng-controller="menuCtrl" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-lg')">
<md-toolbar class="md-medium-tall">
<span>Toolbar</span>
</md-toolbar>
<md-content layout="column" flex>
<span>Your sidenav</span>
</md-content>
</md-sidenav>
<div layout="column" flex md-theme="green" id="content">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<!-- Add a toggleMenu function to your menuCtrl controller with the following in it
$mdSidenav('left').toggle(); -->
<i class="fa fa-bars pointer" ng-click="toggleMenu()" hide-gt-lg></i>
<h1 flex>Your App</h1>
</div>
</md-toolbar>
<md-content ui-view layout="column" flex></md-content>
</div>
</div>
</body>
</html>
@rishabh1403
Copy link

i used this code , but the sidebar height is going all way down , i mean , my content area is big , but the content in sidebar is less, so i lave to see a black sidebar till the end of page . Is there any way to fix that sidebar there so that i can only see the contents of side bar even when i am at the bottom of page ? thanks

@sachq
Copy link

sachq commented Mar 30, 2016 

<div layout="row">
 <md-sidenav flex="20" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
  <md-toolbar class="md-primary md-hue-3">
     <h3>Project Title</h3>
  </md-toolbar>

  <md-content flex ng-controller="navLeft" class="sidebar">
    <md-menu-item flex layout="row">
      <md-button ng-href="">
        <span flex="15">
          <i class="material-icons">&#xE8B6;</i>
        </span>
        <span flex md-menu-align-target>Item 1</span>
      </md-button>
    </md-menu-item>
    <md-divider></md-divider>
    <md-menu-item flex layout="row">
      <md-button ng-href="">
        <span flex="15">
          <i class="material-icons">&#xE8E5;</i>
        </span>
        <span flex md-menu-align-target>Prediction</span>
      </md-button>
    </md-menu-item>
    <md-divider></md-divider>
  </md-content>
</md-sidenav>
</div>

<div layout="column" flex>
 <md-toolbar layout="row" layout-align="end center" class="md-primary md-hue-3" ng-controller="NavCtrl">
     <!-- Toolbar Content Here -->
  </md-toolbar>
 <md-content>
   <div flex="100" layout-padding ng-controller="SearchCtrl">
      <!-- Main Content Here -->
   </div>
 </md-content>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment