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


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

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;

This works for me:

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

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() {

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

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


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

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.


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 .