I want to increase the height of the lightning:textarea. When I add two textareas to the aura:component, it looks like this: enter image description here

And, i want to increase the size of the upper textarea. So, according to this answer, I have to apply css to the textarea. So, I did like this:

.THIS .textAreaClass {
  height: 10rem;

And i applied the css to the textarea. But, instead of a getting a bigger textarea, i am getting this:enter image description here

So, what am I doing wrong? Is there any other way to increase size of textarea? Or is there any way to automatically increase the height of textarea to fill the whole text inside it?

EDIT: textarea definition:

<lightning:textarea class="textAreaClass" value="{!v.emailConsent}" type="text" aura:id="emailConsent" name="emailConsent" label="Consent Email"/>
  • Please, paste your textarea definition as well (what is in the .cmp) Commented May 9, 2020 at 7:12
  • @SergioAlcocer i just did Commented May 9, 2020 at 7:14
  • Is it on the "top level" (so, not inside any other component, such as tabs, card, etc ? Commented May 9, 2020 at 7:19
  • @SergioAlcocer it is inside a lightning:accordionSection Commented May 9, 2020 at 7:22
  • its not working. the style is not applying at all when i remove the space. Commented May 9, 2020 at 7:31

1 Answer 1


Give this one a try

.THIS .textAreaClass .slds-textarea{

This should apply it to the textarea and not to the container.

Note 1: Be careful while overriding css on standard components, you would have to check each release that they haven't changed their structure / classes in a way that impacts your visualisation.

Note 2: Sometimes, when giving classes to direct children (or children of nodes that are not rendered, such as <aura:if, etc. you might have to omit the space between .THIS and .yourclass. It's always easier to have a look at the rendered html to know what is the css-class path you need to use, playing with the browser developer console until getting the expected result, and then put those changes in your .css

  • thank u very much. it worked Commented May 9, 2020 at 7:40
  • You are welcome ;) Commented May 9, 2020 at 7:41

You must log in to answer this question.

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