QLayout, Headers, and scrolling
-
If I create a simple layout with a header and a scrollable main window area, quasar seems to make the scrollable area start at the top of the screen (at the top of the header) and adds padding to the top of the scrollable area so its content can’t be scrolled under the header. This leads to an odd-looking behavior with the scroll bar, and any use of classes that define an element within that window to have 100% height makes the elements larger than the actual window.
You can see this in the docs for a basic layout. Note the way the scroll bar goes up under the header at the top: https://quasar.dev/layout/page#Example--Basic
What I really want is the top of the child area to be at the bottom of the header, so the scroll bar looks right, and the child window has the right actual window height that its children can inherit.
I think I can pull this off with flex classes, but it feels like I’m swimming upstream as I would have to override a lot of existing layout classes.
Is there a better way?
-
@jmbldwn I think if you went and played with the Layout Builder, you’d instantly be able to achieve the look you desire.
https://quasar.dev/layout-builder
It’s linked from the Layout section in the docs, but I’ve given you the direct link.
-
I’ve been trying that. Mostly it lets you decide what the left- and right-drawers do. I can’t seem to get it to constrain the main page space.
-
Hi, long time ago… But the issue is the same today. I really try many configurations. In all the examples on the framework documentation we have the same feature. As jmbldwn said “Note the way the scroll bar goes up under the header at the top: https://quasar.dev/layout/page#Example--Basic”. In other situation I will use a “q-page-sticky” but in this case I can’t. I want to really have header width of 100%, without the side scrollbar. The scrollbar has to stay under the header. When I’m using the layout setting “hHh”, the header is correctly fixed on the top, no issue when scrolling. It’s unpleasant to have a scrollbar on the side of an element that is not affected by the scroll. Best regards. Christian
-
So anyone got a real solution how to prevent the scrollbar going through the header?
