javascript - How to make the vuetify snackbar grow dynamically? - Stack Overflow

admin管理员组

文章数量:1393091

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>

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>

• javascript
• vue.js

Share Improve this question Follow asked Mar 11, 2019 at 9:58 SalmanSalman 43111 gold badge88 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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./en/ponents/snackbars#api ]

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

本文标签： javascriptHow to make the vuetify snackbar grow dynamicallyStack Overflow