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

Question

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

Related: https://stackoverflow.com/questions/48706964/v-text-field-textarea-default-height-change — Traxo, Mar 11 '19 at 14:43

DjSh · Answer 1 · 2019-03-06T14:18:48.757

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

edited Mar 06 '19 at 14:18

answered Mar 06 '19 at 14:07

DjSh

2,776
2
19
32

If the above solution did not work, you can also try `.v-text-field--box>.v-input__control>.v-input__slot, .v-text-field--full-width>.v-input__control>.v-input__slot, .v-text-field--outline>.v-input__control>.v-input__slot{ min-height: 40px !important; }` and remove the margin like: `.v-text-field--box input,.v-text-field--full-width input,.v-text-field--outline input { margin-top: 0 !important; }` and make sure you do it globally (i.e in App.vue) – DjSh Mar 13 '19 at 15:00
This works so long as not using a scoped style. Thanks! – Chaos_Is_Harmony May 30 '22 at 12:26

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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.

score 0 · Answer 3 · answered Apr 07 '21 at 17:10

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>

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

3 Answers3