md-sidenav toggle() is on top of the md-toolbar

All we need is an easy explanation of the problem, so here it is.

I want to be able to toggle a sidenav without hiding the top left part of the md-toolbar, similiar to how Google Inbox works:



(source: cbsistatic.com)

It seems like the toggle function is causing it, because without the animation, the sidenav in showing underneath the md-toolbar.

Is that possible?

<body layout="column" ng-controller="mainCtrl">
<md-toolbar layout="column" class="md-medium-tall"><span flex="flex"></span>
    <div class="md-toolbar-tools">
        <md-button class="menu" ng-click="toggleLeft()">
            <md-icon md-svg-src="assets/svg/menu.svg"></md-icon>
        </md-button>
        <div layout="row" flex="flex" class="fill-height">

            <div class="md-toolbar-item md-breadcrumb">
                <span>Title</span></div>
            <span flex="flex"></span>
        </div>
    </div>
</md-toolbar>


<div layout="row">
    <md-sidenav layout="column" md-component-id="left" class="md-whiteframe-z2 md-sidenav-left" >

        <md-list>
            <md-list-item>
                <md-button>Hey</md-button>
            </md-list-item>
        </md-list>

    </md-sidenav>
</div>

<script src="bower_components/jquery/dist/jquery.min.js"></script>

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>

<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="js/app.js"></script>

and the app.js

var app = angular.module('anApp', ['ngMaterial'])
.controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) {


$scope.toggleLeft = buildToggler('left');

function buildToggler(navID) {
    var debounceFn = $mdUtil.debounce(function () {
        $mdSidenav(navID)
            .toggle()
    }, 100);
    return debounceFn;
}}]);

Thanks!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I also had the same problem and @William S’s solution didn’t work for me. SideNav won’t show properly if it has relative position. i got it working by putting SideNav and Content in a <md-content flex></md-content>:

<md-toolbar>
    <div class="md-toolbar-tools">
        <md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
    </div>
</md-toolbar>

<md-content flex>
    <md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
        <md-list>
            <md-list-item>

                <md-item-content md-ink-ripple>
                    <div class="inset">Item 1</div>
                </md-item-content>

            </md-list-item>
        </md-list>
    </md-sidenav>

    <md-content>Content</md-content>
</md-content>

Method 2

Small Update: Please note that this answer is for Angular Material 0.10.1. As Angular Material is still very young, this solution may not work forever, or will become redundant.

For making the top bar overlap the sidenav, you have to give it a higher z-index than the sidenav (anything over z-index: 60 will do)

HTML

  <md-toolbar layout="column" class="main-toolbar md-medium-tall">
    <span flex="flex">
      <h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
    </span>
  </md-toolbar>

CSS

.main-toolbar {
  /* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
  z-index: 61;

  /* Cosmetic */
  background-color: green;
}

This however will make the top part of the right sidenav to be overlapped, which might not be what you’d want.

For making the sidenav appear below the top bar, you need to change it from absolute positioning to relative, and change display type to block.

For this, you’ll have to override some CSS of the sidenav element, and put the right sidenav within a div that follows layout=”row”.

HTML

<div layout="row">
    <!-- your sidenav -->
</div>

CSS

.md-sidenav-right {
  /* Cosmetic, show where the fill starts */
  background-color: pink;

  /* Override from absolute to relative */
  position: relative;

  /* Change to block display */
  display: block;
}

Here is a codepen utilizing both changes above. Base code taken from the angular-material demo, version 0.10.1.

http://codepen.io/qvazzler/pen/mJGrya

Method 3

HTML Code

<md-toolbar hide-gt-md>
<div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="Menu Button" hide-gt-md ng-click="onClickMenu();">
        <md-icon md-svg-icon="menu.svg" aria-label="Menu Icon"> </md-icon>
    </md-button> <h2>Title</h2> <span flex></span>
</div>

JS Code

$scope.onClickMenu = function () {
    $mdSidenav("left").toggle();
};

Find Complete Detail for md-toolbar on following link

Complete Detail for md-toolbar

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply