Devesh Agrawal Devesh Agrawal - 24 days ago 5
AngularJS Question

sidenav not displaying properly in angularjs material design

This is my code.

<body>
<div ng-controller="MainCtrl as mc">

<md-content>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<span flex="5"></span>

<md-button ui-sref="Home">
example.com
</md-button>


<span flex="20"></span>


<span>something something</span>
<span flex="20"></span>


<md-button ng-show="!login" aria-label="Settings" ui-sref="Login">
Login / Register
</md-button>

<md-button ng-show="login" class="md-icon-button" aria-label="Settings" ng-click="openRightMenu()">
<md-icon class="material-icons">menu</md-icon>
</md-button>

<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>

</div>
</md-toolbar>
</md-content>

<div ui-view></div>
</div>
</body>


When i click on button to open right side nav it opens but height is same as of toolbar.

How to display sidenav of standard size?

kTn kTn
Answer

put md-sidenav outside md-content

<div  ng-controller="MainCtrl as mc">

    <md-content>            
    </md-content>

    <md-sidenav md-component-id="right" class="md-sidenav-right">
        <md-button href="http://google.com">Google</md-button>
    </md-sidenav>

    <div ui-view></div>

if it's inside md-toolbar it will take toolbar height

Comments