0

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:

enter image description here

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:

enter image description here

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?

2
  • have you tried using a styling hook?
    – Nick C
    Commented May 26, 2023 at 5:35
  • @NickCook Yes I've reviewed the styling hooks for the component but there are none that allow me to set the resize property. Only min and max size lightningdesignsystem.com/components/rich-text-editor
    – Gene
    Commented May 26, 2023 at 15:24

1 Answer 1

0

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

You must log in to answer this question.

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