Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify v-dialog - Dynamic width

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

like image 468
Dally Avatar asked Mar 10 '19 08:03

Dally


1 Answers

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;
}
like image 198
avenmore Avatar answered Oct 07 '22 00:10

avenmore