1

I would like to change the min-height of a Salesforce Lightning rich text component.

The original code (old vendor) used a long text area and Aura. I changed it to rich text area using lightning:inputRichText which works fine. (I see this is actually still Aura since it is not the lwc's lightning-input-rich-text) but anyway it functions fine.

Now the client wants the input box to be taller by default. (Yes I know it grows but anyway.) The rich text input box opens defaulted to min-height: 6rem and I want to change it to 14rem.

Editing the css file has no effect even targeting the computed tag name, and adding normal style tags to the aura component file are rejected. It looks like I need to initialize from JS but the following does not work.

What is the proper way to achieve my goal? (Also is there a problem with staying in Aura and not converting to the lwc method?)

Aura component has:

 <aura:handler name="init" action="{!c.doinit}" value="{!this}"/>


  <div aria-hidden="false" class="slds-section__content canEnter">
    <lightning:layout class="slds-wrap slds-grid">
      <lightning:layoutItem class="slds-col slds-size_1-of-1 slds-p-around_x-small">
        <div class="slds-text-title slds-text-heading_small slds-p-vertical_xx-small red">Meeting Notes</div>
        <aura:renderIf isTrue="{!v.isPermissibleEditMeetingNote}">
          <lightning:inputRichText value="{!v.meetingNote.Comments__c}" class="canEnter"/>
        <aura:set attribute="else">
          <lightning:formattedRichText value="{!v.meetingNote.Comments__c}"/>&#x202a;
        </aura:set>
      </aura:renderIf>
    </lightning:layoutItem>
  </lightning:layout>
</div>

a javascript controller has this (I added the last line component.set, which has no effect)

doinit : function(component, event, helper) {
        document.title = "New Meeting Notes | Salesforce";
        helper.callLoadMeetingNote(component, event); 
        helper.callLoadContactNoteRelations(component, event);
        helper.callLoadStaffNoteRelations(component, event);    
        helper.callLoadStrategyDiscusseds(component, event);
        component.set('v.min-height','14em');
},

3 Answers 3

1

Yes it can be targeted in the css file. Lightning components such as lightning:inputRichText generate their own HTML that will have to be targeted. The following will work with your provided class:

.THIS .canEnter .ql-editor.slds-rich-text-area__content {
    min-height:14rem;
}
1
  • Thank you, this worked! Much appreciated.I could not figure that out even after wading through Inspect Element in Chrome. I'm not sure what element would need to be accessed to do the same from the doinit function but you have solved my problem, so I am moving on. Thank you very much.
    – skycafe
    Jun 5, 2019 at 7:22
2

Here's a solid option if you need auto-sizing:

All you have to do is add the below code to your CSS file within your Aura or LWC. This automatically sets the appropriate size for the rich text area. This will even automatically resize email templates if you're injecting them in.

CSS Code:

.THIS {
     --slds-c-textarea-sizing-min-height: 100%;       
     --slds-c-textarea-sizing-max-height: 100%;    
}

Example .cmp code for the email body section. You'll notice you do not have to call out a class for lightning:inputRichText:

<lightning:layoutItem size="12" flexibility="auto">       
  <label class="slds-form-element__label"><abbr class="slds-required" title="required">* </abbr>Body       
  </label>       
  <lightning:inputRichText label="Body" value="{!v.emailBody}"/>  
</lightning:layoutItem>
1
  • CSS code also works if you've used a lightning card: <lightning:card variant="Narrow" title="{!'My rich text area card'}" iconName="doctype:pdf" > <div class="slds-p-around_large" > <lightning:inputRichText label="Notes:" labelVisible="true" value="{!v.richTextNote}" formats="['font', 'size', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'clean', 'table', 'header', 'color']" /> </div> </lightning:card> Mar 26 at 15:48
1

You can change height using CSS for lightningInputRichText control

 .THIS .slds-rich-text-editor__textarea{
    height: 14em;
}
2
  • Thank you but this does not work. It changes the height of the surrounding section but not of the rich text component.
    – skycafe
    Jun 5, 2019 at 5:12
  • Edited code based on comment. Please check now. Jun 5, 2019 at 7:07

You must log in to answer this question.

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