Stack Overflow
Stack Overflow

Questions tagged [mat-sidenav]

68 questions
0
votes
2 answers

how to center mat-list-item with mat-icon in mat-nav-list with Material 15.1.2

I am having trouble getting my anchor text and icon to look centered with Material 15.1.2 My layout looks like this:
KenB
  • 215
  • 1
  • 5
  • 17
0
votes
1 answer

Progress bar does only show half completed on 100 percent inside mat-sidenav

I am using a simple mat progress bar inside a mat side nav and inside content. if value is 100, then it should be completed but it is getting half filled while in mat side nav content it works as expected. …
Muhammad Raghib
  • 97
  • 1
  • 10
0
votes
0 answers

Angular Mat Side navigation bar issues when content is huge and footer issues

I am using Material side navbar and I am facing issues when the content is huge and my footer is displaying in odd places. guide me in this navbar Html:
shashank
  • 15
  • 5
0
votes
0 answers

mat-sidenav-content that contains router-outlet "breaks" everytime I have to open the mat-sidenav

I'm not sure if I didn't build this properly or if I just encountered a bug. So I have an Angular application in which I'm working with a MatSidenav that has the Sidenav itself and the Sidenav-content which contains the router-outlet. I have this…
User
  • 53
  • 5
0
votes
0 answers

Angular - mat-sidenav-content does not show up

Currently I try to embed a Sidenav using mat-sidenav-container but the content in mat-sidenav-conent is not shown on the Website (using localhost). The Tutorial im watching does exactly the same and shows the "Main" when loaded. Did I miss…
Patrice
  • 19
  • 4
0
votes
0 answers

Sending an array to a different component with mat-sidenav

I've been searching for a solution but havent found one. I have a component which displays a list of fetched data and every row has a checkbox. Also im using mat-sidenav to display 2 sidenavs and router-outlet to display main-content. The right…
rbrtj
  • 51
  • 5
0
votes
1 answer

How can I set the height of mat-sidenav-content to 100%

I can't scroll down my mat-sidenav-content to the bottom. I can't see my pagination down below. I try to use the fullscreen on mat-sidenav-container but my mat-toolbar is missing. How can I set my mat-sidenav-content depending on my content? You can…
Angelica
  • 29
  • 1
  • 7
0
votes
1 answer

Contents of Angular Sidenav material container don't render

I am trying to use the angular material sidenav in my project but when I add it to the project it causes the entire page to be blank (white) and when I inspect the DOM nothing inside of mat-sidenav-container is rendered. I'm sure whatever I'm doing…
Eberwolf
  • 3
  • 1
0
votes
1 answer

How to pin mat-toolbar and mat-sidenav and only have a scrollbar inside mat-sidenav-content?

See the following StackBlitz for the app in question: https://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html
0
votes
1 answer

Getting 'this._ngZone is undefined' error in StackBlitz

I'm trying to run an angular app inside StackBlitz. It was working fine, until I tried adding a mat-sidenav-container. Then the app started failing with the following error displayed in the console: ERROR Error: this._ngZone is undefined Here's…
Eternal21
  • 4,190
  • 2
  • 48
  • 63
0
votes
1 answer

How can I make mat-sidenav take up entire vertical space underneath mat-toolbar?

I'm trying to get the following angular-material layout working. I have a mat-toolbar at the top, and mat-sidenav on the bottom. No matter what I try, I can't get the mat-sidenav-container to take up the whole page height. This is my attempt…
Eternal21
  • 4,190
  • 2
  • 48
  • 63
0
votes
1 answer

Angular mat-sidenav is not showing unless content height is set

Was trying to get material sidebar to open over two hours, and discovered, that if there is no height set on sidenav-content, then sidebar is not opening at all. My goal is to have sidebar full height always on the left side, not same height what…
user9534568
  • 5
  • 2
0
votes
1 answer

ElementScrolled Event is not being fired with CdkScrollable and mat-side-nav

I have the following DOM Configuration
…
Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82
0
votes
1 answer

Can I use the same Angular router-outlet in different templets based on screen size

I'm trying to make my main page have a mat-sidenav when the screen is on desktop, but use mat-toolbar when it is on tablets and mobile. I have no problem getting this done. The problem I'm running into is displaying the router-outlet. I want to have…
soloDev
  • 3
  • 3
0
votes
1 answer

How to save sidenav (mat-drawer) state to localstorage in Angular Material?

I have problem with mat-drawer in Angular Material. I want to save my state to localstorage but mat-drawer is always opened. Sidenav have expanded part and closed expanded part when stay mat-icons without text. When you click on bottom button Hide,…
BeauNut
  • 69
  • 3
  • 10
1 2
3
4 5