QDrawer Different breakpoint on mobile and desktop

[enforbAlzi]

What happened?

When I'm on a mobile device the breakpoint for QDrawer is 1023px and the panel hides. But when I switch to desktop, breakpoint for QDrawer is 1006px and the panel hides.

I found out that .q-page-container has padding-left property and this is computed incorrect for desktop devices.

What did you expect to happen?

Same breakpoint for mobile and dektop devices.

Reproduction URL

https://codepen.io/enforbalzi/pen/KKxyqVz

How to reproduce?

1. Go to the provided reproduction link
2. Open borwser's devTools and set dimension to 1024x768
3. For desktop you can change the value from 1024 to 1007 and the QDrawer will not disappear
4. After value 1006px QDrawer disappear
5. For mobile change the value from 1024 to 1023 and the QDrawer will disappear

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge, iOS, Android

Quasar info output

version: 2.11.7

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @enforbAlzi! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[enforbAlzi]

Hi @enforbAlzi! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

Done

[pdanpdan]

On desktop the width of the vertical scrollbar of the browser is subtracted from the breakpoint (no matter if the scrollbar is visible or not)

[enforbAlzi]

I want to create a toggle button (show/hide left drawer) but only visible when the left drawer is hidden. Otherwise on desktop < 1006px and on mobile < 1024px. How? Because adding the "lt-md" class doesn't work the same everywhere.

[pdanpdan]

For this it is better to use the model Define a ref drawerVisible, add v-model="drawerVisible" on QDrawer and only show button when false

[enforbAlzi]

But after clicking the toggle button the button disappears. And if I have other elements behind that button, then every time it is hidden, the elements will move.

[enforbAlzi]

I would like to know why is difference in breakpoint between mobile and desktop? Because I don't understand this.

[enforbAlzi]

No answer about different breakpoints for mobile and desktop?

[w0pp]

+1, I was just about to create an issue about this.

How are we supposed to do responsive design with this? All the media queries use a static breakpoint (1024) while q-drawer uses a dynamic one (1023+scrollbarWidth)... Should we do something like this to force QDrawer's breakpoint to always be 1023?:

<q-drawer :breakpoint="desktop ? (1023 + getScrollbarWidth()) : 1023" />

I agree that this seems like a really strange decision. I don't understand why only QDrawer would take into account the scrollbar width for its breakpoint, while everything else (Breakpoints, Screen Plugin etc) doesn't.