CODEWITHSUNDEEP
javascriptscrollbarquill
u936293
u936293

Reputation: 16264

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?

Upvotes: 4

Views: 18337

Answers (5)

Skynet Yu
Skynet Yu

Reputation: 1

For those who suffered from Angular quill in this question,

I suggest you should add this code in the style.css.

.ql-toolbar {
  position: sticky;
}

.ql-container {
  overflow-x:auto;
  height: 300px; /* whatever you what */
}

Upvotes: 0

Some guy
Some guy

Reputation: 567

I had to modify two of quill's classes to get what I wanted. Like so

.ql-container.ql-snow {
    height: auto;
}
.ql-editor {
    height: 150px;
    overflow-y: scroll;
}

Upvotes: 14

chirag jain
chirag jain

Reputation: 419

You will need to modify one of quill's class

.ql-container.ql-snow {
  border: none;
  height: 150px;
  overflow: scroll;
}

Upvotes: 1

u936293
u936293

Reputation: 16264

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/

Upvotes: 3

0bero
0bero

Reputation: 1062

  1. The tool bar is not fixed and scrolls.

You can change the CSS of the toolbar like the following:

.ql-toolbar {
    position: fixed;
    top: 0;
}
  1. The vertical scrollbar has a scrollable region all the time, even when the editor is empty.

You can lower the min-height of the editor so it's lower than the container (80% for example).

Upvotes: -1

Related Questions