React-quill: Dynamic editor height

[thienanle]

Is there a way to change the editor height to shrink/expand to fit its contents?

[alexkrolick]

It will expand, set it to a smaller initial height

[alagos]

Not sure if is the same problem, but to whoever has a similar problem, I wrote this style to set min/max heights to the editor and activate horizontal/vertical scrolling:

.ql-editor{
  min-height: 100px !important;
  max-height: 300px;
  overflow: hidden;
  overflow-y: scroll;
  overflow-x: scroll;
}

[phoomparin]

Simple. Just make sure ql-container and ql-editor's height is set to auto. No need to set the overflow property since the height will dynamically grow.

  .ql-container {
    height: auto !important;
  }

  .ql-editor {
    height: auto !important;
  }

[zenoamaro]

The feature is supported by Quill already, and I believe the proposed solutions are solving the issue.

[monsieursam]

Is it possible to set the height with like 100% percentage ? It's seems to not working

[alexkrolick]

100% height in CSS is tricky - you need to set the parent and all its parents to 100% to do so, or use some combination of some position: absolute and Flexbox.

Here's a possible solution for a simple component tree: https://codepen.io/alexkrolick/pen/wmRddV?editors=0100