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?

5 Answers 5

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, 2017 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, 2017 at 6:36
  • See updated @Rishi Golyan
    – JMRAF69
    Aug 3, 2017 at 6:44
  • 2
    Can you also add one more style .THIS .slds-rich-text-area__content{ max-height: 100%; } Aug 3, 2017 at 7:30
  • Maraming Salamat (Thank You very much). It works great. Thanks for your help
    – JMRAF69
    Aug 3, 2017 at 7:47
3

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

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.

0

This worked for me. It retains the side slider when you've added more lines of text.

.THIS .ql-editor.slds-rich-text-area__content {min-height:800px;}

You must log in to answer this question.

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