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?


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 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/…) – Rishi Golyan 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%; } – Rishi Golyan 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

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.

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.