QDrawer - Set width based on breakpoint
Is there a way to set another width for small screens?
My use case is I need a fixed width for desktop and 100% width (:width="$q.screen.width) for mobile.
It seems this cannot be done with media queries?
Take a look at the docs: https://quasar.dev/layout/drawer#QDrawer-API
show-if-aboveis also relevant.
As i understand it, :breakpoint defines from where mobile mode is active but is it possible to set full width in mobile mode only?
Set the drawer to full width? AFAIK it’s already only full width on mobile …
metalsadman last edited by metalsadman
@nniclas get the width of your viewport store it in a data model and use that in qdrawer’s
widthprop. Computed prop should work too. https://quasar.dev/quasar-utils/dom-utils#Get-Height-%2F-Width or this to get sizes of screen or element https://quasar.dev/vue-components/resize-observer#Introduction.
@Allan-EN-GB so I thought, but actually not setting the :width will default the drawer to 300px regardless. (using v1.1.0)
you are able to use :width="$q.screen.width for full screen width
my issue is that it would be nice to set the width from a condition based on screen size
@metalsadman thanks seems like a good pointer, I will look into this
Can’t you just do:
:width="$q.platform.is.desktop ? '300px' : $q.screen.width"
If it needs to be more complicated then you can use Aldrins suggestion.
That will suffice for this case, I was not aware it was this easy to use conditionals in a view, thank you!