CODEWITHSUNDEEP
vue.jstextareavuetify.js
Chris
Chris

Reputation: 1

Vuetify - How to change the v-textarea row-height?

I would like to change the font size. But if I do this then the row height does not change. I tried using row-height = "40" to do this. Unfortunately this does not work. I've tested with the vue development extension which props v-textarea has. There I see a rowHeight. But this has no effect, too.

    <v-textarea
        value="The Woodman set to work at once,and so sharp was his axe that the tree was soon chopped nearly through."
        row-height="40"
        class="headline"
     ></v-textarea>

Vuetify Guide -> Textarea

Prop-Name =row-height (Height value for each row)

Default= 24

Type = number | string

Thanks a lot, Chris

Upvotes: 0

Views: 9096

Answers (3)

Andrew Zagarichuk
Andrew Zagarichuk

Reputation: 509

Some times it don't work if you were set [style scope]. That what is working for me. I used here an attribues + important operator and it works even with style scope option.

    <v-textarea text-narrow>
    ...
    </v-textarea>

    <style scope>
    [text-narrow] {
        line-height: 1.1 !important;
    }
    </style>

Upvotes: 0

George Marios
George Marios

Reputation: 183

I stumbled upon the same problem with you, and the css solution didn't suffice as the line-height value would not be reactive.

Thankfully, in the latest component documentation (https://vuetifyjs.com/en/components/textarea), its is now clear that the auto-grow prop is required in order for the row-height prop to be applied:

row-height: type number | string, default 24

description: Height value for each row. Requires the use of the auto-grow prop.

Upvotes: 1

DjSh
DjSh

Reputation: 2764

You can add the rows="4" property to change the height of the text-area. To change the row-height you can add a css class

.v-textarea textarea {
      line-height: 40px;
 }

See my example

Upvotes: 2

Related Questions