How to create an element like Drawer: take all available height and scroll for the content that don't fit in.
-
I’m looking to create something similar with the Drawer: take all height and scroll for the rest of content (if required) A list of cards will fill it and for what is overflow a scroll will do.
Sounds simple but for some reasons I can’t get it done. I have attached a picture with an example of UX I took from Pinterest.
Any suggestions? Somehow I feel it is simple and I just miss some basic classes or something like that. I played with row, col + full-height, scroll, fit, but no result.
-
Maybe use QScrollArea…
-
@hawkeye64 Thanks for suggestion. I did not find QScrollArea in v1 but I verify it on the v0.17.
Here is part of the code from docs at: https://quasar-framework.org/components/scroll-area.html
<q-scroll-area
style=“height: 200px”
[…]And the magic stopped at that height element. What I did not manage to do was to find an elegant method to make the element fit the available space on the screen (on y) and stay at that size. Scroll when the content is higher.
Anything I tried, except the barbarian height = 100vh - 70px which is just temporary until I find a way to get it done.
Is it even possible without javascript? I tried to see how quasar drawer is calculating the height but could not find it. -
QScrollArea is still there. Got missed in docs, but will be there for next website update. It hasn’t changed, so you can use the 0.17 docs for it in the mean time.
Quasar drawer is calculating the height in the CSS just as you are (I believe). -
@hawkeye64 I know, I found and used QScroolArea. My question was on how to calculate the height like QDrawer. I could not found it in the code on github.
