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;

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);

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 {
  • 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 '19 at 7:22

You can change height using CSS for lightningInputRichText control

 .THIS .slds-rich-text-editor__textarea{
    height: 14em;
  • 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 '19 at 5:12
  • Edited code based on comment. Please check now. – Dhanik Lal Sahni Jun 5 '19 at 7:07

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.