Apply a custom height and width for lightning:textarea

Question

I want to set the height of a lightning:textarea field, Here is what I found in the Lightning Component Developing guide -

The rows and cols HTML attributes are not supported. To apply a custom height and width for the text area, use the class attribute. But I can't get it to work, can anyone help me with this please?

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_textarea.htm

Answer 1

You'll need to add css to do this.

If you would like to set the same custom height on all lightning:textarea in your component, you can add:

.THIS textarea {
  height: 5rem;
}

If you want to add height to specific lightning:textarea, you should make a custom css class and put it on the lightning:textarea you would like to modify. Here's an example of that:

.THIS .tallTextArea textarea {
  height: 5rem;
}

<lightning:textarea label="Default Height Text Area" />
<lightning:textarea label="Tall Text Area" class="tallTextArea" />