How do I get the Quill link editor to appear on TOP of the Quill toolbar?

Question

I use Quill.js for dynamically created text editors.

I'm using bounds to keep the link editor inside my DIV left/right, but if the user creates a link in the first row of the Quill editor the link editor is hidden behind the Quill toolbar.

If I create a few carriage returns, then add the link, the link editor is visible.

In Quill demos these editors appear on TOP of the editor...how can I make this happen? Or some other solution so the crucial link editor is visible?

Here's a snippet:

quillP = new Quill('#comment-editor' + comment.comment_id, {
           modules: {
             toolbar: quillTB
           },
             theme: 'snow',
             bounds: '#comment-editor' + comment.comment_id
           });

Tom Tom · Accepted Answer · 2020-10-20T12:40:47

We had a similar issue and fixed it by changing the z-index.

In our case we overloaded the quill.snow.css and modded the corresponding block.

.ql-snow .ql-tooltip {
    ...
    z-index: 2;
}

Hope that'll help you. ;-)

How do I get the Quill link editor to appear on TOP of the Quill toolbar?

1 Answers