[SalesForce] How to adjust min-height of Salesforce Lightning input rich text component on load

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');
},

Best Answer

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;
}
Related Topic