Stack Overflow
Stack Overflow

Questions tagged [mat-sidenav]

68 questions
0
votes
2 answers

How to implement Sidenav, Header & Footer in angular material?

I'm trying to use a classic Header, Footer & Sidebar navigation in Angular with Angular Material. However, I'm getting issues with setting the height causing multiple scroll issues in the viewport. I'm attaching the layout for reference. I'm using…
Srinath Kamath
  • 542
  • 1
  • 6
  • 17
0
votes
1 answer

Any way to mix 'push' and 'over' modes of Angular Material mat-sidenav?

Please check the code here: https://stackblitz.com/edit/angular-sidenav-mixedpushover I would like to set up an angular material sidenav so that it has a toggle button that is always visible and slides with the sidenav as it opens and closes. The…
TimH
  • 1,012
  • 1
  • 14
  • 24
0
votes
1 answer

Angular Material Sidenav Module is not recognised

I'm using Angular 9.1.11 as well as Angular Material 9.2.4 . I have this problem when I try to import the MaterialSidenavModule so i can use components such as mat-sidenav-container etc. Here is my app.module.ts file: import { BrowserModule } from…
Roman Blahuta
  • 29
  • 3
0
votes
2 answers

How to make a toggleable mat-sidenav push also a fixed header in the mat-sidenav-content

I'm using the mat-sidenav-container to create the desktop version of my page, but I want to make the mat-sidenav toggleable , which I've already managed to do. The problem now is that I have a fixed header on the mat-sidenav-content, and that part…
eddy
  • 4,373
  • 16
  • 60
  • 94
0
votes
1 answer

Angular material sidenav dynamic height

Im using: Angular 9.1.4 with Angular/Material 9.2.4 For a project I am doing at the moment there is a requirement to create dynamic components in a material sidenav. https://material.angular.io/components/sidenav/overview I had it all set up and it…
sdev95
  • 132
  • 1
  • 11
0
votes
1 answer

Why does the sidenav only appear in the header in angular?

Why does the sidenav only appear in the header? I have no idea what's wrong. app.component.html: …
P. Mark
  • 81
  • 1
  • 3
  • 12
0
votes
2 answers

Check if MatSidenav closing animation ended

How can I check if the MatSidenav component finished its closing animation? I'm looking at the documentation but I can only see a closedStart event. Is there some workaround or something I am missing for what I want to do?
Marco Ripamonti
  • 267
  • 1
  • 3
  • 12
0
votes
1 answer

Angular material sidenav and expansion insert padding to the left, why?

I try to make the simplest of foldable left side nav bars, but it does not stick to the left and instead gets padded so it ends up in the middle of the page. There is no CSS. The amount of padding is depending on the length of the word…
LosManos
  • 7,195
  • 6
  • 56
  • 107
0
votes
1 answer

How to display my component next to side bar on click of menu from sidenav in angular 8 and angular material

I am working on Angular 8 and Angular material but I am stuck at a point where I want to display my content or(component) next to sidenav i.e is main screen when any link from side menu is clicked.Here is piece of my code Link of stackblitz…
tyler
  • 231
  • 4
  • 8
  • 18
0
votes
1 answer

fxFlex rules won't apply to mat-sidenav

I'm trying to center content of . The problem is any rules that I'm trying to apply won't change anything. If I add fxFlex rules to everything seems to work just fine. I've tried to apply rules for each element, but still no clue. the code for the…
Kajetanoss
  • 159
  • 1
  • 2
  • 8
0
votes
1 answer

Angular: mat-sidenav ignores autosize or mode on resize

I am currently trying to implement the mat-sidenav into a project. Everything seems to work fine except for one situation: If I run the app locally in a browser, and I pull the window tab containing the app away and let it go (basically forcing it…
Rainman400
  • 1
  • 2
0
votes
1 answer

Side Nav panel in Angular

I am trying add a button (to open the side panel) , but for some reason it shows up on the top left of the page. I want it to appear on the middle (right side) so when the user clicks on it the panel displays. I also want the current content on the…
YaniSolis
  • 3
  • 5
0
votes
4 answers

Fixed hamburger icon angular

I generated a header component using ng generate @angular/material:material-nav --name header, in this I need to have the hamburger icon fixed even if the screen size is larger. Right now it appears only when screen size is small. I need some help…
PremKumar
  • 1,282
  • 4
  • 25
  • 43
0
votes
0 answers

Error while creating a side bar navigation in Angular

I am trying to create a dashboard in Angular. I am using angular material package to create it. My code works, but I have a problem with side navigation. As you could see from the image below when i click the button, the width of the side menu is…
Mikz
  • 571
  • 2
  • 11
  • 29
0
votes
0 answers

Hide Angular Material Sidenav with Android Back button

Is it possible to hide an Angular Material Sidenav component by using Android 'Back' button when you open your site with an Android device?
nAviD
  • 2,784
  • 1
  • 33
  • 54
1 2 3
4
5