CODEWITHSUNDEEP
cssangularjsangular-material
Golden Heart
Golden Heart

Reputation: 678

How to create fixed sidenav and fixed toolbar using Angular Material

I want to crate layout as there in http://flatlogic.github.io/angular-material-dashboard/#/dashboard

I tried with the following layout but i am not able to achieve it where the tool bar on top is fixed and we will get scroll only for the content view

Layout

How to acheive the layout as mentioned in above link

Upvotes: 1

Views: 2743

Answers (2)

adam0101
adam0101

Reputation: 31055

Something like this?

angular.module('BlankApp', ['ngMaterial'])
  .controller('ctrl', function ($scope, $timeout, $mdSidenav, $log) {
    $scope.toggleRight = function(){
        $mdSidenav("right").toggle();
    };
  })
body{
   /* This is only needed because I can't add layout="column" to the BODY tag in this example. */
   display: flex;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet"/>
<div ng-app="BlankApp" layout="column" flex>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-messages.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>

<div ng-controller="ctrl" layout="row" flex>
  <md-sidenav md-is-locked-open="true" style="width: 80px;">
    <md-toolbar>
       <a class="md-toolbar-tools"><h1>AMD</h1></a>
     </md-toolbar>
     left side
  </md-sidenav>
  <div layout="column" flex>
    <md-toolbar layout="row" layout-align="end center">
      <md-button class="toolbar-button">Search</md-button>
      <md-button class="toolbar-button" ng-click="toggleRight()">Toggle Right</md-button>
    </md-toolbar>
    <md-content flex layout-padding>
      <div style="height: 2000px">tall content</div>
    </md-content>
  </div>
    <md-sidenav class="md-sidenav-right" md-component-id="right" style="width: 80px;">
    <md-toolbar>
       <a class="md-toolbar-tools"><h1>right</h1></a>
     </md-toolbar>
     right side
  </md-sidenav>
</div>
</div>

Upvotes: 1

Happysmithers
Happysmithers

Reputation: 761

You need to use a CSS flexbox. This enables you to arrange the items accordingly. Use the overflow property to control the scrollbars. See here:

https://www.w3schools.com/css/css3_flexbox.asp

I created a sample fiddle for you: https://jsfiddle.net/q0g6gtn9/

HTML:

<div class="wrap">
  <div class="header">Navigation bar</div>
  <div class="content">  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing..</p>            
  </div>
</div>

CSS:

html,
body,
.wrap {
  height: 100%; 
}

body {
  overflow: hidden;
}

p {
  margin-bottom: 1em;
}

.wrap {
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0 0 auto;
  background-color: red;
  padding: 1em;
}

.content {
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto;
}

Upvotes: 2

Related Questions