4

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

1
  • 1
    what have you tried? please include your code, it will be easier for community members to assist you. thanks
    – glls
    Commented Feb 1, 2018 at 1:27

2 Answers 2

6

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" />
1

Try this:

HTML:

<lightning-textarea class="textAreaBody"></lightning-textarea>

CSS:

.textAreaBody {
    --sds-c-textarea-sizing-min-height:175px;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .