Vuetify: Using display classes with v-dialogs

[dschreij]

I wanted to ask a short question about the following before I file a bug report, because it might just be intended behavior what I'm experiencing. If it's not, I'd like to turn this into a feature request.

Vuetify offers several display classes which determine if an element should be shown for the current viewport width (hidden-xs-only,hidden-sm-and-up,etc.). These don't appear to work for v-dialog elements; they always show regardless of the class attached. Is this intended, as I can understand v-dialogs rarely need to be responsive?

Consider the situation however in which you want to show dialogs as normal modals when the viewport width is large, and change the dialogs to a fullscreen panel that slides up (along the lines of https://github.com/vuetifyjs/docs/blob/master/examples/dialogs/3.vue ), if the viewport width becomes too small (at small viewport widths the normal dialogs become to cramped for my taste, especially when displaying forms). You could simply create the two v-dialog types simultaneously and determine which to show using vuetify's display classes.

I don't know if this is the best approach to tackle this problem (maybe handling this in JS by listening for window-resize events and conditionally display one or the other dialog with v-if is better than using CSS) or if it would cause any problems, but I'd like to hear your thoughts on this. Thanks!

[jacekkarczmarczyk]

For this purpose you can use $vuetify.breakpoint available since 0.15:

<v-dialog :fullscreen="$vuetify.breakpoint.smAndDown">

[dschreij]

Perfect! I solved it differently in the meantime, but your solution looks much cleaner.
I just started to work with Vuetify, but I'm very impressed with what I've seen so far and the help you get here.
Can't wait till the official release of 0.15. Great work guys!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord