Breakpoints relatively Layout

[jetsmart]

Hi all
We have a interesting example Containerized QLayout where we see that drawers breakpoint does not refer to the window width, but to the actual width of the QLayout container.
It’s great! But, how can I use this wonderful container with relative breakpoints for the classes like col-<breakpoint>-<number> where <breakpoint> does not refer to the window width, but to the actual width of the QLayout container?

[dobbel]

@jetsmart

I found this:

https://github.com/Kelin2025/vue-responsive-components

https://itnext.io/making-adaptive-vue-components-with-resizeobserver-123b5ebb20ae

https://www.digitalocean.com/community/tutorials/vuejs-vue-responsive-components

non Vue.js solution:

https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/

[jetsmart]

thanks @dobbel
I also met similar solutions. It works, but this is “standalone” solutions.
I have Quasar app with template based on quasar classes like col-<breakpoint> and similar. And I wish it would work both in the window and in the сontainerized layout the same way.
It would be nice if Quasar developers implemented this feature

[dobbel]

@jetsmart

I agree it could be a useful addition to Quasar.
I suggest you post a feature request on github.