1

Is there a way for the lightning:inputRichText to make its size and length longer?

Updated: enter image description here I've already put a style of

.THIS .lightningInputRichText { height: 500px; }

But as you can see, the editable part was still fixed. How can I adjust the editable part of the lightning:inputrichtext?

2

Yes you can easily do by simply adding a height in lightningInputRichText. when lightning:inputRichText renders on load it have the class with lightningInputRichText and then you can easily override height of that class.

This is working Example-

.THIS .lightningInputRichText {
    height: 500px;
}
5
  • Failed to save undefined: Issue(s) found by CSS Parser (0Ad0n0000009DLg): Expected to find closing brace '}': at line 6, column 1 in '.THIS { } .THIS .lightningInputRichText { » height: 500px; }' : Source Receiving this error when trying your code.
    – JMRAF69
    Aug 3 '17 at 6:33
  • Do you have any other css in there? May be a blank file with .THIS{} ? If Yes please remove that and add .THIS .lightningInputRichText { height: 500px; } For more information on how to add css in lightning component please go through this link (developer.salesforce.com/docs/atlas.en-us.lightning.meta/…) Aug 3 '17 at 6:36
  • See updated @Rishi Golyan
    – JMRAF69
    Aug 3 '17 at 6:44
  • 2
    Can you also add one more style .THIS .slds-rich-text-area__content{ max-height: 100%; } Aug 3 '17 at 7:30
  • Maraming Salamat (Thank You very much). It works great. Thanks for your help
    – JMRAF69
    Aug 3 '17 at 7:47
1

This works for me:

.THIS .slds-rich-text-editor {
    height: 500px;
}
1

For LWC it's a bit tricky. We solved it by putting the following code into the component that embeds the <lightning-input-rich-text/>:

// renderedCallback
renderedCallback() {
    this.adjustRichText();
}

adjustRichText() {
    let element = this.template.querySelector('lightning-input-rich-text');

    if (!element) {
        setTimeout(() => {
            this.adjustRichText()
        }, 100);

        return;
    }

    const style = document.createElement('style');
    style.innerText = '.ql-editor.slds-rich-text-area__content {min-height:600px;}';
    element.appendChild(style);
}

We need to wait for the rich text to be rendered with a setTimeout, and then add a <style> element to it.

Known issue: The height of the textarea will change once the user focusses the rich text area.

1

For LWC, per the documentation, you can add this to your LWC's css file to adjust height,

:host {
--sds-c-textarea-sizing-min-height: 600px;
}

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.