javascriptscrollbarquill

Quill: How to prevent toolbar from scrolling and set the height?

I am trying to follow the sample at https://quilljs.com/playground/#autogrow-height but have problems setting the height of the editor box and preventing the toolbar from scrolling off-screen.

My code is:

<div id="editorcontainer" style="height:10em; min-height:100%; overflow-y:auto;">
   <div id="editor" name="editor" style="min-height:100%; height:auto;"></div>
</div>

<script>
  var quill = new Quill("#editor",{
     modules: {
       toolbar: [ ... ]
         },
         scrollingContainer: "#editorcontainer",
         theme: "snow"
     });
</script>

The JS Filddle is available at https://jsfiddle.net/OldGeezer/xpvt214o/556844/

The output looks like this:

enter image description here

There are two problems:

  1. The tool bar is not fixed and scrolls.
  2. The vertical scrollbar has a scrollable region all the time, even when the editor is empty.

How do I solve these two problems?

Solution

  • My solution was to add an additional encapsulating div with position:relative to establish the reference frame for ql-toolbar which is set to position:absolute.

    The editorcontainer is then given a margin-top:3em to hold the toolbar (when it is short enough to fill a single row).

    <div style="position:relative;margin-top:5em;">
  <div id="editorcontainer" style="height:10em; min-height:100%; 
         overflow-y:auto;margin-top:3em">
     <div id="editor" style="min-height:100%; height:auto;"></div>
  </div>
</div>

<style>
  .ql-toolbar { position: absolute; top: 0;left:0;right:0}
</style>

    The working fiddle is at https://jsfiddle.net/OldGeezer/oLq2bnzv/