CODEWITHSUNDEEP
angularmaterial-design
Jus10
Jus10

Reputation: 15689

Cannot combine a toolbar with sidenav properly

I'm getting strange behavior with my css. I am using material design and I just want a Toolbar to go across the top, with a sidenav on the left under the toolbar to the bottom of the screen. So far, even with no content, I get a scrollbar on the right. OR I get the toolbar not extending to the bottom of the screen. Most recently, with this code:

<md-toolbar style="padding: 8px" color="primary">
    Inside the toolbar
</md-toolbar>

<md-sidenav-container style="
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    min-width: 100%;">
  <md-sidenav>
    Inside the Sidebar
  </md-sidenav>

  <div>
    <router-outlet ></router-outlet>
  </div>
</md-sidenav-container>

I get everything looking ok, except it cuts off the bottom of my page (The same amount that the toolbar takes up). So it's like the sidenav renders first at the full height of the screen, then the toolbar pops in and pushes everything down. Anyone know a way around this?

Upvotes: 0

Views: 489

Answers (1)

Sasxa
Sasxa

Reputation: 41294

There are some issues about this at github, I didn't see any proper solutions yet tho'. I did a quick CSS hack, might be helpful to you too:

  .mat-sidenav-content
    height calc(100% - 64px)
    @media (max-width:600px) and (orientation:portrait)
      height calc(100% - 56px)

    @media (max-width:960px) and (orientation:landscape)
      height calc(100% - 48px)

It's a stylus code, you can recreate it in sass/css, whatever you're using.

edit:

Forgot to mention, I also used this on parent component where my sidenav is:

parent-to-sidenav
  padding-top 64px
  @media (max-width:600px) and (orientation:portrait)
    padding-top 56px

  @media (max-width:960px) and (orientation:landscape)
    padding-top 48px

Upvotes: 1

Related Questions