sidenav не отображается должным образом в дизайне материала angularjs

Это мой код.

<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>

Когда я нажимаю кнопку, чтобы открыть правую навигацию, она открывается, но высота такая же, как и на панели инструментов.

Как отобразить сиденав стандартного размера?


material-design angularjs angular-material
person Devesh Agrawal    schedule 01.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

поместить md-sidenav вне 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

person kTn    schedule 02.03.2016