set outer height/width bounds on quill

[adamskwersky]

I want to set a fixed height and width for the combined quill DOM (toolbar and editor) The reason for that is because our application uses customer defined UIs, and they can set any height/width. We want the editor to fit inside this because other UI elements may be on the page in specific locations. Each component needs to fit inside its geometry. When we try to set the height by passing it as a style in ReactQuill, both the combined quill and the editor (contents) take on the same height, meaning the actual quill height ends up being the specified height + the toolbar height.

See

https://codesandbox.io/s/react-quill-template-forked-g9m7j

I have put a double border around the quill object so you can see the editor extending past the defined height.

Ticket due diligence

• [x] I have verified that the issue persists under ReactQuill v2.0.0-beta.2
• [ ] I can't use the beta version for other reasons

ReactQuill version

• [ ] master
• [X] v2.0.0-beta.2
• [ ] v2.0.0-beta.1
• [ ] 1.3.5
• [ ] 1.3.4 or older
• [ ] Other (fork)

This might be a quill issue, then again, I could make the argument that its really not something quill innately supports. If I could get access to the toolbar DOM I could calculate the size and then adjust the height of the editor accordingly. But that does not seem like a very react way to do things. The logic should get encapsulated in the component rather than to have the parent component try to hack the DOM.

[adamskwersky]

Any progress on this?

[adamskwersky]

ping

[slince]

hello, you can change container height

.quill  .ql-container{
    max-height: calc(100% - 42px);
}

[zhaopan-pan]

你好，你可以改变容器高度

.quill  .ql-container{
    max-height: calc(100% - 42px);
}

请问42px是代表工具栏的高度吗？如果是的话，工具栏的高度会随着页面宽度变化会有折行的情况