1

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 facilitating just 2 lines and then it does not go to the third line and instead if the message is too long, it exceeds the size of the snackbar and hence some of the message is not visible anymore. How can I make it grow dynamically such that it facilitates very long messages as well. Following is my code:

<template>
  <div>
    <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'"
    >
      <div>{{ text }}</div>
      <v-btn
        color="white"
        flat
        @click="snackbar = false"
      >
        Close
      </v-btn>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: true,
      y: 'top',
      x: 'right',
      mode: '',
      timeout: 6000,
      text: 'Yayy! Benutzer erfolgreich angelegt',
    }),
  };

</script>
Salman
  • 393
  • 1
  • 7
  • 23

2 Answers2

3

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.

Saurabh Talreja
  • 335
  • 2
  • 6
1

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/ ]

stdob--
  • 28,222
  • 5
  • 58
  • 73