CODEWITHSUNDEEP
htmlvue.jsvuetify.js
Josef Henn
Josef Henn

Reputation: 162

Autosize vuetify textarea to value-size

I want the textarea to be just as big as the valuecontent. currently the textarea is standard size and I have to scroll to see the whole valuecontent

<v-flex xs12 sm6 md6 lg4 pt-5 pb-5>
                    <v-textarea
                      auto-grow
                      label="Comments"
                      id="comment"
                      counter
                      :value="props.item.SurveyResults[0].comment"
                    ></v-textarea>
                  </v-flex>

Upvotes: 2

Views: 9389

Answers (1)

Helene Tran
Helene Tran

Reputation: 186

If what you want to perform is one row by default until you increase to more rows this is how to do: https://codepen.io/Helene-Andre/pen/OrWgyz?editors=1010

Just adding the attribute rows="1"

VUE TEMPLATE

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-textarea rows="1"
                      auto-grow
                      label="Comments"
                      id="comment"
                      counter
                      :value="comment"
                    ></v-textarea>
      </v-container>
    </v-content>
  </v-app>
</div>

JS

new Vue({ 
  el: '#app',
  data: () => ({
    comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus non itaque possimus dicta sunt dolorem cum est autem reprehenderit architecto! Autem, aperiam, magni. Mollitia dolorum modi, tempora enim vero deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus non itaque possimus dicta sunt dolorem cum est autem reprehenderit architecto! Autem, aperiam, magni. Mollitia dolorum modi, tempora enim vero deserunt."
  })
})

Upvotes: 12

Related Questions