Questions tagged [sidenav]

122 questions
7
votes
5 answers

Sidenav with affix - links do not wrap to next line

If I have the following, the link text wraps to the next line beautifuly:
Robben_Ford_Fan_boy
  • 8,494
  • 11
  • 64
  • 85
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
4 answers

An angular-material-multilevel-menu for Angular 6?

I have tried to achieve a multilevel sidenav and I found this that meets my requirements: angular-material-multilevel-menu Demo - Note the accordion type Unfortunately this is created for AngularJS (1.0?), which seems to not work in Angular 6. My…
sibert
  • 1,968
  • 8
  • 33
  • 57
5
votes
5 answers

How to use sideNav of materialize css with react?

I'm developing an app with React, I want to use the sidenav component http://materializecss.com/side-nav.html The problem is that I'm getting this error: Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav…
sirandy
  • 1,834
  • 5
  • 27
  • 32
4
votes
2 answers

Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'

Hi I don't know what to do with this Here's the error compiler.js:2430 Uncaught Error: Template parse errors: Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'. 1. If 'mat-sidenav' is an Angular component and it has 'mode' input,…
Mark
  • 293
  • 1
  • 11
  • 25
3
votes
2 answers

Angular : open sidenav with another component , ERROR TypeError: Cannot read property 'toggle' of undefined

I can not open a sidenav from another component. The error is in the image at the end of this question. I would like to use this style of sidenav in my code: https://stackblitz.com/angular/lronayrmlye?file=src%2Fapp%2Fsidenav-autosize-example.ts but…
jojupiter
  • 68
  • 1
  • 11
3
votes
1 answer

Angular material sidenav hover

I am trying to build an Angular Sidebar. Currently, it is having a toggle effect which means, when we click it, it will collapse. If it is collapsed, it will expand. Now I am trying to expand only the item which gets hover. I need some help with…
Leela Vathi
  • 71
  • 1
  • 2
  • 5
3
votes
3 answers

My sidenav does not push the content, it overcomes it

I'm trying to make the Side Material Sidenav push the content when I open the bar and obviously when it closes; the elements that were pushed back into place. Currently what it does is open up over the content Here's my…
S. A
  • 493
  • 2
  • 6
  • 14
3
votes
1 answer

angular-5 material sidenav in a separate component to reuse in other components

I am new in angular material following material.angular.io I want to have sidnav on multiple pages the code they provide for sidenav contains sidenav as well as well as content of page, as below
usp
  • 31
  • 1
  • 3
3
votes
1 answer

Side Nav Bar Open/Collapse and Container Resize

So I'm using bootstrap to build a dashboard with a side nav bar. When the navbar is open, the container content is pushed to the right and out of the screen. I want the whole container to be resized to fit the screen. So whether navbar is open or…
Muaath Ali
  • 67
  • 1
  • 9
2
votes
1 answer

How do I fix my SideBar to open and close?

I am trying to get a SideNav to open and close affter pressing a button. However, I can only get it to close. When I pass the sideNave() function to button.addEventListener("click", ... ) nothing happens. I would appriciate your help a lot! My code…
2
votes
4 answers

Giving overflow value is hiding the nested sidenav

I have created sidenav in the below stackblitz I have given overflow-x: visible and overflow-y: auto/hidden so that, I should see vertical scrolling if there are more menu items. But this breaks, my nested sidemenu options which is seen under div…
Shoaib Chikate
  • 8,665
  • 12
  • 47
  • 70
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.…
2
votes
1 answer

Angular Material: How to toggle sidenav when the trigger is in a different component

how do I toggle the sidenav from another component? When the button/trigger is in the same .html file as the sidenav, it work just fine, but if I generate a new component, in my case I named them "sidebar-left" and "topbar," it don't work. What I…
JayP
  • 43
  • 6
1
2 3
8 9