#[closed to articulate better][unsolved] how to make drawer always half?

7 messages · Page 1 of 1 (latest)

tribal cedar
#

Hello,
I'm guessing this is a style issue?

currently, you can click on a list item to open the mat-drawer and the mat-drawer you can close with the [ <- ] button but when the mat-drawer is opened it uses fill width and the mat-drawer-content is also full width and doesn't split in half.

but how can i make the mat-drawer and mat-drawer-content always be 50% each so that it is always evenly split when mat-drawer is opened regardless of the content inside.
and then in a responsive view when mat-drawer is closed/user closes mat-drawer <- arrow, the mat-drawer-content goes back to filling the width?
currently the mat-drawer for some odd reason fills the width when opened.

also, im not sure if this is the mat-sidnav-container or the wrapping div or somewhere else but i can't seem to make the app fill the browser so that there is no scroll bar on the overall app and only a scrollbar inside mat-drawer and mat-drawer-content.
there all these extra scrollbars showing up and overflow should only be inside mat-drawer, mat-drawer-content, mat-sidenav only. im guessing some kind of style is overriding properly filling the area and overflow?
https://stackblitz.com/edit/angular-evequf?file=src/app/sidenav-responsive-example.html

image.png
wicked vapor
#

your better off just using your own layout for this

#

seems you have it pretty worked out already and the closing/opening animation is trivial

tribal cedar
#

i don't think this is related to animations?
i'm actually thinking of disabling animations in the future so i don't think animations are related to the question.
and make it so on narrow/mobile screen the mat-drawer fills the whole area just like a normal mobile sidenav would behave and on large screen sidenav open up to 50% of the container.
but i don't see how animation is related to making the mat drawer and mat content 50% 50% large screens?

#

[unsolved] how to make drawer always half?

#

so im not sure why stackblitz is different from local project but for the local project i used a very crud or un-elegent way of using ngstyle to force it 50% and then put another flag when screen is smaller set to 100%. but the problem still exists for the stackblitz one.

how to make the mat-drawer component responsive from large screen to half the component and small screen to be 100%?
it seems to just do 100% width all the time with no responsiveness logic added.