Questions tagged [mat-drawer]
13 questions
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
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
1 answer
Unable to make an element's position sticky in a mat-drawer-container
I'm having a problem with a div using position: sticky; inside mat-drawer-container. Here's what I've tried:
.mat-drawer-container.my-drawer-container {
overflow: scroll;
}
.mat-drawer-content.my-drawer-content {
overflow: scroll;
}
with…
Whisher
- 31,320
- 32
- 120
- 201
2
votes
1 answer
mat-drawer-content with padding doesn't allow the scroll to go to the bottom of the page
Yesterday I faced a problem with my application scroll. I'm using Angular Material and I have a layout organized in the following areas:
mat-toolbar at the top of the page;
mat-drawer on the left side of the page for navigation…
joaogouveia
- 51
- 3
1
vote
0 answers
can we control mat-drawer toggle speed in angular?
This is my code. I want to slow the mat-drawer toggle speed. How does it do it?
Vihan Gammanpila
- 346
- 4
- 10
1
vote
1 answer
How can I keep a material mat-drawer from closing when the user clicks off it?
Be default the drawer closes when you click off it but I only want it to close when the user click the cancel or save button in the drawer.
punkouter
- 5,170
- 15
- 71
- 116
1
vote
0 answers
Change Mat-drawer State on Window Resize
I want the "Setting" drawer to respond to window resize like it does on this settings page.
Taking a look at their style elements, I can see a lot of mat-drawer css classes that (I presume) handle the drawer's state and events:
mat-drawer…
Jnr
- 1,504
- 2
- 21
- 36
1
vote
2 answers
Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer
I'm trying to implement the [hasBackdrop]=true on my mat-drawer-container with multiple mat-drawers. My html structure is something like this:
Gustavo Scarpellini
- 35
- 1
- 6
0
votes
0 answers
Angular mat-drawer-container height (useless scrollbar)
Certainly a trivial problem for a CSS expert but really infuriating for me.
Here is a stackblitz demo : https://stackblitz.com/edit/ezyirk?file=src%2Fexample%2Fnav-menu.html,src%2Fexample%2Fnav-menu.scss,src%2Fexample%2Fnav-menu.ts
How could I get…
fcjunic
- 1
0
votes
1 answer
How can I close a mat-drawer in Angular when the user slides it away from the container?
I have a mat-drawer in my Angular application that can be opened and closed by clicking a button. However, I also want to allow the user to close the drawer by sliding it away from the container. How can I achieve this functionality?
ojoaovitoraraujo
- 57
- 1
- 8
0
votes
1 answer
The scrollTop value of mat-drawer-content is not being read in a different component until interacting with screen
The whole goal is to make a scroll to the top button on a certain page. The actual scrolling works, but the button is not shown on page scroll.
Originally, I called to the scrollable mat-drawer-content container using plain Javascript:…
Jess Flintstone
- 1
- 2
0
votes
0 answers
How to use multiple mat-drawer inside mat-drawer-container?
After using multiple drawer inside a mat-drawer-container the backdrop is disabled & drawer opening one upon the other.
Below is the structure.
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