Reputation: 1437
is it possible to make the v-dialog have dynamic width? Currently the v-dialog by default has dynamic height which makes it shorten and lengthen depending on the length of content.
But can this be done with width?
I have a v-dialog that contains 4 tabs. 3 of those tabs don't require much width but the last tab contains a table so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
Vuetify v-dialog: https://vuetifyjs.com/en/components/dialogs
Upvotes: 17
Views: 31532
Reputation: 6564
Use what scientists are using.
Make width
as a computed variable, and then return your value based on the breakpoints.
If you want to set width dynamically based on the contents in the dialog then just modify the width function to return the width
based on the contents.
Copied from vuetify site: LINK
<v-dialog v-model="dialog" :width="width">
<v-img src="~~~"></v-img>
</v-dialog>
<script>
...
computed:{
width() {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
}
},
}
</script>
Upvotes: 0
Reputation: 73976
so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
For desktop, we can set dynamic width for v-dialog
based on contents inside the dialog easily, by manually setting the width="auto "
(with extra space).
<template>
<v-dialog width="auto ">
...
</v-dialog>
</template>
Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. But need to set dialog to full-screen in mobile devices only. We can easily set dynamic full-screen using Vuetify breakpoints like:
<template>
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
We can combine both the logics into one like:
<template>
<v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
On Desktop
On Mobile
Upvotes: 13
Reputation: 4434
Write custom css rules and not set width
or max-width
props. e.g.:
I use a custom class in order to not apply rules to all v-dialog
:
<v-dialog v-model="dialog" content-class="v-dialog--custom">
<!-- dialog content -->
</v-dialog>
And create your custom rules:
.v-dialog--custom {
width: 100%;
}
/* Desktop */
@media screen and (min-width: 768px) {
.v-dialog--custom {
width: 50%;
}
}
You can see this on codepen: https://codepen.io/hans-felix/pen/BajByxx
Upvotes: 5
Reputation: 2885
Setting width to "unset" seems to work, haven't discovered any negative side effects yet.
<v-dialog v-model="dialog" width="unset">
<YourDialogContent></YourDialogContent>
</v-dialog>
or CSS
.v-dialog {
width: unset;
}
Upvotes: 34
Reputation: 11
I think, what are you searching is the fullscreen (bool) property or depending on the needs the max-width (Number) property.
By setting one of those you control the width of the v-dialog depending on the surrounding element. The surrounding element width can be adjusted via css, e.g. flexbox.
Upvotes: 1
Reputation: 7103
Are you talking about this part?:
<v-dialog
v-model="dialog"
width="500"
>
If so, why just don't remove the width="500"
part and leave without one? I tested and it stretches dynamically. This option is not required and nothing is breaking if you remove it.
In case I misunderstood something, please feel free to add more details.
Upvotes: 1