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

<style scoped>    
    .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/ ]