Clever Geek Handbook

How to make md-sidenav container full height div in corner app?

I have an angular4 application and I am using the angular materials structure https://material.angular.io/components/sidenav/examples . I want the md-sidenav-container to stretch the entire height of the div without covering the header. I have attached a full screen directive that makes the sidenav fill the full height of the screen, thus closing the header component. This is not what I want. The images show the sidenav stretching over the heading, and also another try where it stops at the heading but doesn't stretch to the bottom. I want it to stretch all the way to the header and to the very bottom of the screen. How should I do it? Thank!

Html

<div class="bar">
  <md-sidenav-container class="example-sidenav-fab-container">
  <md-sidenav #sidenav mode="side" opened="true" align="end">
    <!--<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">-->
      <!--<md-icon>add</md-icon>-->
    <!--</button>-->
    <div class="example-scrolling-content">
      <ul>
        <li>Recommendations</li>
        <li>Events</li>
        <li>Settings</li>
      </ul>
    </div>
  </md-sidenav>
  <button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
    <md-icon>add</md-icon>
  </button>
</md-sidenav-container>
</div>

Css

md-sidenav-container
  :background-color white
  :float right
  :width 300px
  :height 400px

md-sidenav
  :background-color $light-blue


//.example-sidenav-fab-container
//  width: 300px
//  height: 400px
  //border: 1px solid rgba(0, 0, 0, 0.5)


.example-sidenav-fab-container md-sidenav
  max-width: 300px

.example-sidenav-fab-container md-sidenav
  display: flex
  overflow: visible

.example-scrolling-content
  overflow: auto


.example-fab
  position: absolute
  right: 20px
  bottom: 10px

.bar
  :height 100%

Not what I want

+3


source to share


3 answers


I found this workaround which works fine

HTML

<md-sidenav-container id="container" fullscreen >

CSS 



#container {
 top: 64px !important;
}

@media(max-width: 599px) {
  #container {
    top: 56px !important;
  }
}

top must have the same toolbar height. Remember that the standard height of the Corner Material toolbar becomes smaller when the width is less than 600 pixels.

+11


source


I was struggling with the same problem. The solution to set the top to 64px didn't work for me.

I found two different solutions.



  • The first solution uses flexbox. Place md-toolbar

    and md-sidenav-container

    inside a div with height: 100%

    and use display: flex

    with flex-direction: column

    .

  • As an alternative, a decision can actually do the same thing, you can leave the elements md-toolbar

    and md-sidenav-container

    at the root level, and then make md-sidenav-container

    height: calc(100% - 64px)

    , where the height of the toolbar - 64px.

+7


source 


html, body, material-app, mat-sidenav-container {
  height: 100%;
  width: 100%;
  margin: 0;
}
+3


source






More articles:


All Articles