CODEWITHSUNDEEP
cssangularjsmaterial-designangular-material
Asieh Mokarian
Asieh Mokarian

Reputation: 1129

page shoud not scroll when using sidenav and toolbar together in angular material

When I use md-sidenav without having md-toolbar, everything is OK. Means that, opening sidnav will perform correctly like image below.

enter image description here

But when I add a toolbar before a sidenav or before the section containing sidenav, Upon opening the sidenav the page will find scroll and sidenav will not fill the entire page's height(image below), while it should be the same as before. toolbar height size will add to the height of page.

enter image description here

complete code at plnkr

here is the main part of the code:

<div ng-controller="AppCtrl" layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools" layout="row" style="background-color:crimson">
            ...
        </div>
    </md-toolbar>

    <section layout="row" flex>
        <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            ...
        </md-sidenav>

        <md-content flex layout-padding>
            ...
        </md-content>

        <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
            ...
        </md-sidenav>
    </section>
</div>

Upvotes: 3

Views: 2175

Answers (1)

Asieh Mokarian
Asieh Mokarian

Reputation: 1129

I solved the problem with using different layout of page. Using md-sidenav before md-toolbar:

<div layout="row">
   <md-sidenav>        
   </md-sidenav>
   <div layout="column">
      <md-toolbar>
      </md-toolbar>
      <md-content>
      </md-content>
   </div>
</div>

Upvotes: 4

Related Questions