I am currently working on creating a simple webpage layout similar to that of Stack Overflow, with a sidebar and a main content area that can scroll. In my case, the content area is intended to host a QuillJS text editor.
To integrate the QuillJS editor into my page, I create a div element and specify it as the target for QuillJS:
<article>
<div id="editor"></div>
</article>
<script>
var quill = new Quill('#editor', {theme: 'snow'});
</script>
However, after implementing this setup, I noticed that QuillJS injects an additional div above the specified editor div, resulting in the following structure:
<article>
<div id="ql-toolbar"></div>
<div id="editor"></div>
</article>
This extra div impacts the sizing of the editor div, causing some display issues. While manually removing the toolbar div resolves the problem temporarily, it is not a sustainable solution. Adjusting the size of the editor div manually based on the presence of the additional div is also not ideal.
I am seeking a more permanent and robust solution to this issue. If anyone has encountered a similar challenge or has suggestions for resolving it, I would greatly appreciate your insights.
For reference, here is a link to a Codepen demonstrating the problem (noticing the scrollbar cut-off at the bottom): https://codepen.io/anon/pen/wQyxVm