csstoolbarstickyquill

Making quill toolbar sticky

I want to create a basic, but responsive Quill editor. It is proving harder than I expected.

I want to put a Quill (v1.3.7) editor in a window, with the snow toolbar at the top and the edit pane filling all the rest of the window. The edit pane should scroll when the edited text exceeds the height of the window, but the toolbar should remain at the top of the window, not scroll out of sight. Both the editor pane and the toolbar should resize themselves when the window is resized (e.g. if the window is made narrower, the toolbar may change to three lines of buttons, rather than one or two).

I have found:

  1. The quickstart code on the front page of the Quill documentation does not work: if you add many lines of text, the toolbar scrolls up and out of sight.
  2. The Quill interactive playground works, but has a hard coded editor pane height:
#editor-container {
  height: 375px;
}
  1. There are some suggestions on StackOverflow, but none of these fulfill all my requirements (e.g., this JSFiddle is promising, but the height of the toolbar is hard coded)

Suggestions?

Solution 

  •  .ql-toolbar {
            position: sticky;
            top: 0;
            z-index: 1000; 
            background: white;  
        }