How To Make The Vuetify Snackbar Grow Dynamically?

I have a vuetify snackbar and I am displaying a message on it. I want the snackbar to adjust itself dynamically, if I type in a long message. At the moment the snackbar is facilita

Solution 1:

You can even grow your Snackbar's width according to the content, by default there's a fixed width. You can overwrite by selecting wrapper class of v-snackbar

<stylescoped>.v-snack__wrapper {
        max-width: none;
    }
</style>

This will grow your snackbar in width. Working example:https://codepen.io/saurabhtalreja/pen/yLJBvZm

If in case you're not able to change width using this, append ::v-deep in front of class, this gives more specificity.

Solution 2:

Use the auto-height property:

<v-snackbar v-model="snackbar":bottom="y === 'bottom'":left="x === 'left'":multi-line="mode === 'multi-line'":right="x === 'center'":timeout="timeout":top="y === 'top'":vertical="mode === 'vertical'":color="'success'":auto-height="true">

[ https://vuetifyjs.com/en/components/snackbars#api ]

[ https://jsfiddle.net/stdob__/bdz90kap/ ]