0

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) – Sergio Alcocer May 9 at 7:12
  • @SergioAlcocer i just did – Jayesh Babu May 9 at 7:14
  • Is it on the "top level" (so, not inside any other component, such as tabs, card, etc ? – Sergio Alcocer May 9 at 7:19
  • @SergioAlcocer it is inside a lightning:accordionSection – Jayesh Babu May 9 at 7:22
  • its not working. the style is not applying at all when i remove the space. – Jayesh Babu May 9 at 7:31
1

Give this one a try

.THIS .textAreaClass .slds-textarea{
    height:10rem;
}

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.