You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am not sure why it was reworked in favor of pixel perfect design, but it was much easier to make navigation drawer certain % of the viewport and now it has to be same on every screen or a computed property must calculate the width.
I have seen that there is an issue #16150 mentioning same behaviour but it was 1.5 years since it was opened and is really not clear on it progress.
I also noticed that the translateX is now the width of the drawer however when it was 110% (in <3.5.18) it seems to work as expected.
Really apreciate your time for looking into this issue and thanks for such a great project like vuetify!
The text was updated successfully, but these errors were encountered:
z0lo13
changed the title
[Bug Report] [3.6.X] Naviagtion Drawer support width in responsive units vw or rem.
[Bug Report] [3.6.X] Naviagtion Drawer support width in % vw or rem.
May 23, 2024
And right now, this looks like a bug ; the drawer is displayed when it should not if the width is in '%' or 'vw'.
Here is a solution I found from a coworker => use the width reactive property from useDisplay:
And this workaround is not perfect as I realize it works only if you don't have any other component has it measure the fullwidth/height of the "page", meaning in a case like this :
if we want the right drawer to take 100% of available space, it would extend behind left drawer (before, it would be placed above main content but would stop at drawer left).
Environment
Vuetify Version: 3.6.7
Last working version: 3.5.18
Vue Version: 3.4.27
Browsers: Chrome 124.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
Not possible to use responsive units such as vw or rem or even %.
The not working playground link:
https://play.vuetifyjs.com/#eNplU2uTmjAU/SupnU7bsW5QgVVHd4qPVVZXUNdntx8QowQDxBAVdPzvja+l037J3FfOPcm959cxFTIbapQ+7LYoVUqVOfIosTh6evcBKO8yFqUX8+LYgc8t7CN2C4mgdbcAcBhaVt5TDuc0LEEoYOIzKsfL2A0f7MCDn1GXkmEja+4P2ischB6RmxIfaI0eGeb308ahGs+ioBrVPH/el3A/zj/P37hZNNJBfjVjMA+bMTwczEPb0CeK2vYIjpy27betoRKTyNN4l+wVuInnci8bvYz7RkMvphtS0w9GY5m53bGuFkjPmW+rm41r5JFf79O8EXq0WC/yHm06Ltoo7UGYmx7qsvLiDYvEVvk6PY0Ml6FVSwvGG7Nbr6E6pU1UHSuTvi6bzZzVt2N1rkqx2Rg+64Os33YVQZelIzndqaqj9gy5MCvJtDqY6tZUgs5oaXWymtLDBdqi+nAyYjVb1cJA6zw3V2ysT9YjRbJ1/Q3X0PR1lcaq3GUdr6Cor1qYe+zoOb6YsYVTKPZbC/PRCFv7dO7N7FXEBJKRPI0Dtsb+CjQiS8wVleHHvJIRzhmAibfLzLkPftoE22uBtWDWHjFQAZ+u1nvqyaDIB/WLV4aX8vuGCO/fFRF4vrXDK4vjwM/cMG69dhkvWCDy0SVhTgL7ckGkGF45PMns8YI7IqxIX5Jg6by1AbNYLDKcbdE99fGsK10w4GK1S+B4BLd3nU4J9f94XjUgMlcRlOFf4hBuaDNMOQgR3141gs8kODgCIQRwAksWeOCrUMDXczkA4mtCfm9cORd9W1okRN/P0FcwAZM6/fC3hFyO338Az+wrCQ==
However in 3.5.18 it was working just fine:
https://play.vuetifyjs.com/#eNplUE1PwzAM/Ssml4G0tSAEQlU3wYEzByZxoBxCmnbR0iRy3FbTtP9O+o3gZr/3/Gy/zzPzKOIX56KmlixhKcnKaU5ylxmAtNlw5/qyb4Q1xJWROEI9+E0GnoVW4rjNWI68lQhbuBqqjO3enDRp3Osmp9D9tQpGhjeq5KSs2YzD45JmU9lc6tk+YxOjregHAoWqPNDCeDppGeBW5XRI4PG2aRcy6b60yPEUFIS1nKj5r/3r+x4+LB6VKZej/104pBSYIaY0/hVfaL1A5Qi8pHpIUXVrCc6AsoALFGgrWIXkV50cIITiCeYMg+i64NrLm856MAs27LI2tdZrdh89RHdP7OsHw+2TPQ==
Expected Behavior
To be able to use other units such as vw, % or rem.
Actual Behavior
only number or number as string is working.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
I am not sure why it was reworked in favor of pixel perfect design, but it was much easier to make navigation drawer certain % of the viewport and now it has to be same on every screen or a computed property must calculate the width.
I have seen that there is an issue #16150 mentioning same behaviour but it was 1.5 years since it was opened and is really not clear on it progress.
I also noticed that the translateX is now the width of the drawer however when it was 110% (in <3.5.18) it seems to work as expected.
Really apreciate your time for looking into this issue and thanks for such a great project like vuetify!
The text was updated successfully, but these errors were encountered: