当前位置: 动力学知识库 > 问答 > 编程问答 >

Angular Material: Why is my sidenav only as tall as it's parent element?

问题描述:

I have an <md-toolbar> directive that contains a <md-button>. When the button is clicked, I am triggering a <md-sidenav> to open. So far, things are working, but my <md-sidenav> seems to be only taking up the height of the <md-toolbar> it is contained within.

For example, my <md-toolbar> is 64px tall. So currently, the

<md-sidenav> is only showing 64px tall.

Is there a way to make the <md-sidenav> render above everything regardless? I assume I can set a fixed height or figure out a fluid height later, but as for now no matter what I do, the <md-sidenav> is only taking up the height of it's parent element.

All other <md-menu> elements I have in my <md-toolbar> are working properly.

Here is the html template:

messages.template.html

<md-button class="md-icon-button" ng-click="$ctrl.toggleMessages()" aria-label="Messages">

<i class="material-icons">message</i>

</md-button>

<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">

<md-toolbar>

<h1 class="md-toolbar-tools">Sidenav Right</h1>

</md-toolbar>

<md-content layout-padding>

<p>This is the sidenav.</p>

<md-button ng-click="$ctrl.close()" class="md-primary">

Close this thing!

</md-button>

</md-content>

</md-sidenav>

Here is my component that is listening to the click and triggering the <md-sidenav>:

messages.component.js

this.toggleMessages = function toggleMessages() {

$mdSidenav('right').toggle().then(function () {

//

});

};

/**

* Close the messages side nav.

*/

this.close = function () {

$mdSidenav('right').toggle().then(function () {

//

});

}

Thank you for any suggestions!

分享给朋友:
您可能感兴趣的文章:
随机阅读: