CODEWITHSUNDEEP
javascriptangularjsangular-material
user6934713
user6934713

Reputation:

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>

Upvotes: 1

Views: 2239

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

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

Upvotes: 0

Related Questions