Resize lightning-input-field when it is a rich text field using the cursor

Question

I have this in my LWC component

<lightning-record-edit-form>

            <template for:each={draftableFields} for:item="field">
                <lightning-layout-item key={field}>
                    <lightning-input-field field-name={field}></lightning-input-field>
                </lightning-layout-item>
            </template>

</lightning-record-edit-form>

When rendered it looks like this, as expected:

However, I want to be able to adjust the size of the rich text box vertically using the cursor on the drag icon on the bottom right. Like this:

I was able to add that by adding these two styles to the HTML element using Chrome's inspect element:

<div class="ql-editor slds-rich-text-area__content slds-grow slds-text-color_weak ql-blank" style="

  resize: vertical;

  max-height: none;

">....</div>

Now I want to do the same, but in my LWC's CSS file:

.slds-rich-text-area__content {
    resize: vertical;
    max-height: none;
}

I can see that the CSS file was loaded onto the page in the <style> tags using inspect element. However, it does not apply the style to the elements with the .slds-rich-text-area__content class.

Is there a way to get those CSS styles onto elements with the .slds-rich-text-area__content class?

Answer 1

Here's a better option:

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>

Alternative Option for CSS to control the size of the text area:

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