Questions about layout
Just trying to figure out how the Layout Component works.
I still don’t get the view code. hhr lpr llh
For the most part I have it how I want, but the right side bar seems to pass through the header when I open and close it. (Side bar is blow the header).
Not sure how to fix that.
How do I have the side bar start closed.
I can’t figure out how to load a menu page into the main view area. I tried setting up some routes /test/main that does take me to the page, but no menu at the top.
I think I solved one part. In the document it said :
“If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue’s <router-view> component, which is just a placeholder where sub-routes are injected.”
I thought sub routes was /test and test/sub-route-page.
But that doesn’t seem to be the case, sub-routes = children pages
I can’t figure out why the child page has a scroll bar.
benoitranque last edited by benoitranque
regarding the view code:
// split your screen in 9 pieces X X X X X X X X X // the center is the page content X X X X p X X X X // top is header, bottom is footer X h X X p X X f X // left and right drawers X h X l p r X f X // who gets the corners? // in this case both top corners go to header, bottom corners to respective drawer h h h l p r l f r // finally scrolling. using an upper case letter will // for header/footer make them non scrolling. They will be fixed while page content scrolls // drawers: they get their own scroll, not shared with page scroll // I want my header fixed to the top, and both drawers to have their own scroll. // My footer should stay at the bottom, and only appear once the whole page has been scrolled down // result H H H L p R L f R // finally place those in one line, slicing the block horizontally: view="HHH LpR LfR" // I hope this helps ```
kosirm last edited by kosirm
Thanks @benoitranque this should be linked in documentation. Finally simple and understandable explanation of the view property!
metalsadman last edited by metalsadman
@kosirm it’s explained here https://quasar.dev/layout/layout#Understanding-the-“view”-prop furthermore, you can test (interactively) how it would look like thru the layout builder https://quasar.dev/layout-builder 2nd step.
kosirm last edited by