CODEWITHSUNDEEP
angularjsangular-material
Rishabh Jain
Rishabh Jain

Reputation: 536

making angular material fixed side-nav

I want to design a page just like the official angular-material website . The toolbar and side nav is fixed while the main content scrolls . I am trying to do that for few hours but haven't been got any success . here is my html template for profile profile.html

<div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2 profileSidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
        <md-toolbar layout="row" class="md-hue-2">

            <h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
        </md-toolbar>
        <md-content>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
        </md-content>
    </md-sidenav>





    <div layout="column" flex>
        <md-toolbar layout="row" class="profileToolBar">
            <button ng-click="toggleSidenav('left')" hide-gt-sm>
                <span class="visually-hidden">Menu</span>
            </button>
            <h1 class="md-toolbar-tools">Hello World</h1>
        </md-toolbar>
        <md-content layout="column" flex class="md-padding">
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
        </md-content>
    </div>
</div>

sidenav and toolbar has been given custom class with position:fixed ; values , but after making position fixed for sidenav the toolbar and content hides behind it

Upvotes: 2

Views: 3706

Answers (3)

Igor Simic
Igor Simic

Reputation: 540

you can ise $mdSticky to make element fixed 

app.directive('sticky', function($mdSticky, $compile) {
    var SELECT_TEMPLATE =
      '<md-content><md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> <md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> </md-content>';
    return {
      restrict: 'A',
      replace: true,
      //template: SELECT_TEMPLATE, // you can use template HTML or load HTML with templateURL as we do it in next line
      templateUrl:appInfo.template_directory+'templates/sticky-sidebar.directive.html',
      link: function(scope,element) {
        $mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
      }
    };
  });

as described here: https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky

Upvotes: 1

Udara Herath
Udara Herath

Reputation: 885

Use this attribute md-is-locked-open="true" on <md-sidenav> tag.

Upvotes: 0

Oscar Caicedo
Oscar Caicedo

Reputation: 320

I solve it with this code:

index.html:

<body layout="column">

    <div flex layout="column" ng-include="'app/layout/shell.html'"></div>
</body>

shell.html

<div layout="row" flex style="height: inherit; overflow: hidden; background-color: transparent" ng-controller="Shell" layout-fill class="fondo">
    <div ng-include="'app/layout/left-side-nav.html'"></div>
    <md-content flex layout="column" role="main"   style="height: inherit; background-color: transparent; " class="">
        <div ng-include="'app/layout/app-toolbar.html'"></div>
        <div layout="row"  layout-align="space-around" ng-if="dataLoading.init" class="loader">
            <md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
        </div>
        <md-content flex  style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init" >
            <div   ui-view="main"   class="noscrollbar"  style=" margin:auto"></div>
        </md-content>
    </md-content>
    <div ng-include="'app/layout/right-side-nav.html'"></div>
</div>

Upvotes: 0

Related Questions