Stack Overflow
Stack Overflow

Questions tagged [mat-sidenav]

68 questions
6
votes
1 answer

Force Angular Material sidenav container with toolbar to fill height

I can't get the Angular Material sidenav container to fill the height of the screen. The sidenav as well as the sidenav content is just as high as it needs to be to fit its content. I want to have it's height to fill the screen. HTML of Nav…
luhu
  • 361
  • 3
  • 12
5
votes
0 answers

Angular Material: display sidenav over dialog

I'm looking for a solution to display a MatSidenav over a MatDialog. My project, mobile first, is built with two sidenavs, left and right, which push the content. At the bottom, there is a fixed footer which can open the left or right sidenav. In…
jourdanqe
  • 51
  • 2
4
votes
0 answers

How to respect scrollbar width for fixed positioned elements in mat-sidenav-content?

Using mat-sidenav from Angular Material I have a problem with a fixed positioned element and centering it according to centered content within the mat-sidenav-content element. One possible solution might be to calculate the width of the scrollbar…
mwinkelm
  • 111
  • 3
4
votes
3 answers

Access MatDrawer using ViewChild is throwing error in Angular 8

I'm trying to set the behavior of MatSideNav through component file using a property of type MatDrawer in Angular version 8 TypeScript Code: // Declaration @ViewChild('drawer', { static: false }) public drawer: MatDrawer; // Toggle the Side Nav…
B.Balamanigandan
  • 4,713
  • 11
  • 68
  • 130
3
votes
1 answer

Angular Material Sidenav with doubled scrolling content

For an angular material based project I'm trying to use sidenav component with the different view possibilities depending on user's device (desktop or handset). So far it works, but with some issues. Namely the content becomes doubled scrolling as…
bofanda
  • 10,386
  • 8
  • 34
  • 57
3
votes
1 answer

How to set mat-drawer-container, mat-drawer and mat-drawer-content height responsive based on content?

By Default mat-drawer-container/mat-sidenav-container and mat-drawer/mat-sidenav height is based on mat-drawer-content/mat-sidenav-content, but I would like to set the mat-drawer height based on its own content and the mat-drawer-container height to…
noiissyboy
  • 61
  • 2
  • 5
3
votes
4 answers

How to toggle angular material sidenav in component

How to call angular material sidenav actions in component? I have use case that sidenav only can open / close when callMethods() method triggered. I can't simply pass open(e) in callMethods() as well (required 1 arugument). Is there anyway to…
SKL
  • 1,243
  • 4
  • 32
  • 53
3
votes
1 answer

Angular Material Chips appearing as rectangle instead of being Rounded inside a sidenav

I created a stackblitz example If you open the side nav and then see the chip on the expansion panel you will see its rectangular in shape but it should look circular. How do I fix this ? Edit: This is there as an issue already on Github
dota2pro
  • 7,220
  • 7
  • 44
  • 79
2
votes
0 answers

Mat-list-item dynamic

I am doing a sidebar that hides the label and shows only an icon when a button is click. The problem that I have is that the mat-list-item in the mat-sidenav does not shows the whole label. I have tried adding width to 100px to the mat-list-item but…
sampineda
  • 29
  • 4
2
votes
2 answers

Can not retrieve route params from a component inside mat-sidenav in Angular

when I put my component inside a mat-sidenav I can't get the route parameters this.route.paramMap.pipe( tap(params => console.log(params)), switchMap((params: Params) => { ... }) ).subscribe( ... );
Smaillns
  • 2,540
  • 1
  • 28
  • 40
2
votes
0 answers

How to stop scrolling in mat-drawer-content, when mat-sidenav is opened

Am using angular material version 8.x. in my application. Have used mat-sidenav-container. When I open the menu, the mat-drawer-content is also getting scroll-able and upon scrolling it to bottom or top, the side menu(mat-sidenav) is getting close.…
user3036042
  • 95
  • 1
  • 4
2
votes
3 answers

Collapsable mat-sidenav menu rezise content not working

I'm making an Angular 9 app and I want to add a sidenav to my project. The sidenav that I want is exactly like this Primer Angular Template --> Primer - Angular 8+ Material This is what I want And This is what I got with my scss and html. The…
Sergio Mendez
  • 1,311
  • 8
  • 33
  • 56
2
votes
1 answer

Fixed element inside mat-sidenav-content

I would like to have a fixed element inside of mat-sidenav-content while still allowing the user to scroll the content behind it when their mouse is over the fixed element. Here is a stackblitz example:…
tgordon18
  • 1,562
  • 1
  • 19
  • 31
2
votes
1 answer

Keep Image Size the same even after zooming in and out

I have a mat-sidenav component filled with mat-card components. Outside the sidenav, I have the rest of my page. What I would like is for my sidenav card components to keep the exact same size as someone is zooming in and out the page. I have…
TheGreatZab
  • 163
  • 1
  • 3
  • 18
1
2 3 4 5