[Vuejs]-Vuetify – How to change the v-textarea row-height?

by

2👍

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

👤DjSh

1👍

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.

👤George Marios

0👍

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>
👤Andrew Zagarichuk

Leave a comment