user6934713 user6934713 - 1 month ago 11
AngularJS Question

Angular material sidenav under the header

I am trying to use an angular material sidenav. Everything works as expected but th e sidenav is sliding over the header. How can I fix that? I created a planker to be able to see my code, but the planker doesn't work as expected. Thank you in advance for the help. https://plnkr.co/edit/gr5n1AbBHADWY4L72MMg?p=preview

This is a part of my code the rest could be seen in Plunker

<div>
<md-toolbar class="md-accent">
<div class="md-toolbar-tools">
<h2>Logo here</h2>
</div>
</md-toolbar>
</div>
<div ng-controller="AdminController as ctrl" class="md-content" ng-cloak>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left"
md-disable-backdrop md-whiteframe="4">
<md-content layout-margin>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column">
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>

Answer

Place the md-button outside

 <section layout="row" flex>
    <md-content flex layout-padding>
      <md-toolbar class="md-theme-indigo">
        <h2>Logo here</h2>
      </md-toolbar>
      <md-button ng-click="clickSide('left')"> Toggle Sidenav</md-button>
    </md-content>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav left</h1>
      </md-toolbar>
      <md-content layout-padding="">
        <md-tabs>
        </md-tabs>
      </md-content>
    </md-sidenav>
  </section>

EDIT: Embed the SideNav and Content in a <md-content flex></md-content>

DEMO