0

I'm trying to follow this tutorial in creating a slide in navigation, and I have the following stackblitz. The side nav is toggleing, but it is not expanding to fit the page. IIUC this CSS class is supposed to do the trick (In styles.css):

.container {
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right: 0px;
}

Thoughts?

Ole
  • 41,793
  • 59
  • 191
  • 359

2 Answers2

1
.container {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top:0px;
    left:0px;
    bottom:0px;
    right: 0px;
}

let me know if that helps, it looks like it works but i don't know exactly what you want, and optionally

padding: 0;
margin: 0;

on the body element to remove the scroll bar.

Shanon Jackson
  • 5,873
  • 1
  • 19
  • 39
1

I have run into many similar issues working with Angular Material. The issue stems from AngMat dynamically generating custom components and classes at render time, so it's often hard to catch these things up front.

If you open the dev tools and select the opened menu, you can find the custom component, <mat-drawer class="sidenav mat-drawer..."/>, This is the piece that is preventing the full width menu. If you manually apply a width: 100% on that component it will snap into place.

There are two approaches I've found, neither of which are ideal solutions. You can look into ::ng-deep and how to override angular material styling by disabling view encapsulation, this is a pretty deep concept when it comes to shadow doms and everything else associated but you don't need to know all of that to know that you can override the styles with the approach. However this will be deprecated at some point. The other approach is a hard-coded width:100% applied directly to the component. So something like mat-drawer { width:100% } in the top level stylesheet.

William H.
  • 93
  • 2
  • 12