Setting a minimun default height to Quill text area

Posted on February 8, 2019

If you are planning to create a tool that includes a WYSIWYG text editor, Quill is great for that.

When integrating a Quill or React-Quill WYSIWYG editor into your project, controlling the height is a common requirement. Although Quill doesnโ€™t provide an out-of-the-box option to set a minimum height for the editor, you can easily achieve this with a simple CSS rule. For example, applying min-height to the .ql-editor class ensures your editor has a default height while allowing it to expand as more content is added. This technique works seamlessly across Quill and React-Quill, whether you're building a custom content editor or embedding it into a larger application. For React developers specifically, setting min-height in conjunction with other React-Quill configuration options helps you maintain consistent and responsive UI design.

If you need to define a default height of the text area, since it doesn't come with that option, just use this CSS rule:

.ql-editor{
    min-height:200px;
}

The component will adapt further if it needs more space for its content.

A kind of happy TIL (Today I Learned).