Changing the Height of the Creatio Freedom UI RichText Editor

The Freedom UI RichText Editor defaults to a single line/row. It does grow as the user enters more and more text. However, this single row gives the appearance that it’s just a normal text field, not one that can support multiple lines of text and can cause some confusion for end users. I prefer to use some CSS to change the default height of the editor. This way, it starts out looking like it supports multiple lines, but will still grow as the user enters more lines than what shows. With this CSS, the end result will look as follows:

To me, this looks far better than the default state of the editor control, which is like this:

The solution to set this height for the editor is to simply add some CSS. For this CSS, you’ll need to know the name of the editor. In this example, my editor is named WorkNotes. If you’ve not set some custom name it’s likely your RichText control will be named something like “RichTextEditor_e01ksou”. Once you know this, you can modify the CSS below with the correct name and then add the CSS to the page (which is the same way you add CSS to a non-Freedom UI page)

/* In the CSS below, my RichText control is named WorkNotes */
crt-rich-text-editor#WorkNotes {
    .rich-editor {
        height: auto;
        min-height: 200px; /* <- this is the initial height of the control */
    }
    .cke_textarea_inline {
        height: 100%;
        width: 100%;
    }
}

Now your control will have this initial height. If the user enters more text it will continue to grow larger.