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

Question

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

Answer 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;
}

Answer 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>

Answer 3

You can change height using CSS for lightningInputRichText control

 .THIS .slds-rich-text-editor__textarea{
    height: 14em;
}