Bubble theme toolbar shows up underneath element

[sferoze]

The bubble toolbar shows up underneath a the side menu. How can I change it so the toolbar loads into the body container instead of inside the quill document container? Otherwise the toolbar gets cut off like so:

Expected behavior:

The quill toolbar should always be on top of everything. Should load toolbar into body container to make this happen.

Actual behavior:

The toolbar loads underneath elements on the screen since the toolbar is inside the quill container.

[jhchen]

Quill can only guarantee to be on top of other Quill UI (which it does), but short of making users place the Quill container at the root, it cannot guarantee other UI in your application will not cover it.

Take a look at Understanding CSS z-index and in particular this example. Even though DIV 4 has the highest z-index, it cannot escape its relative parent's place in the DOM hierarchy.

[sferoze]

@jhchen your right, I actually found out that I had a mistake in my design which was causing this. I fixed it now and the toolbar works as expected. Not an issue with Quill.

[ajoshi31]

@sferoze : I am using angular material that has fixed sidebar, how can I fix this issue I am also having the same issue.
Even I tried z-index but as said it won't help.

[sferoze]

@ajoshi31 if z-index doesn't work then you will have to look at the layout of your dom elements and try adjusting the order of dom elements in html. Also check the overflow of the quill container and make sure its set to visible.

In my case I did a ton of restructuring of how the menu works and I noticed that the toolbar issue was resolved when I did.

[APengue1]

I have solved this problem using the bounds configuration option as mentioned in #1124

[shyamal890]

I frankly believe the tooltip component should be appended to the body instead. This would solve a lot of issues. This is how medium-editor works too.

[letitfly]

Same here. Sometime it's difficult to set the right bounds, and the drop down menu from the bubble toolbar does not observe the bounds option.

[shyamal890]

@jhchen Should have a look if the tooltip can be appended to the body instead.

[rajuashok]

Has this been looked into? I've used bounds to fix this for the popup toolbar in Bubble, but the link preview for any linked text doesn't seem to follow these bounds :(.

[Carl012]

Indeed, the link tooltip in Bubble seems broken.

I just posted here: #360

[douglasdc]

I solve that using z-index on .ql-bubble .ql-tooltip

.ql-bubble .ql-tooltip {
  z-index: 1;
}

[FenoRC]

I found a solution for my situation:
when create the configuration object, set property 'bounds' with the selector of quill container.

Example:

const SELECTOR_CONTAINER = '#quill-container-2';
const DEFAULT_CONFIG = {
        theme: 'bubble',
        bounds: SELECTOR_CONTAINER
};

new Quill(SELECTOR_CONTAINER, DEFAULT_CONFIG);

[Itsmaqsud]

I found a solution for my situation:
when create the configuration object, set property 'bounds' with the selector of quill container.

Example:

const SELECTOR_CONTAINER = '#quill-container-2';
const DEFAULT_CONFIG = {
        theme: 'bubble',
        bounds: SELECTOR_CONTAINER
};

new Quill(SELECTOR_CONTAINER, DEFAULT_CONFIG);

You saved my day! Thank you!

[Seemeile]

We had the problem, that the tooltip was placed inside the quill editor box:

turns out the problem was the "preserveWhitespace" property. We removed it and the tooltip was displayed above the editor box again.

[mkamalkayani]

I also faced this problem and removing the overlfow: auto from a parent element solved it.

[nikkhah63]

overlfow: visible or use bounds

[ayelen3976]

Does anyone know how I can put the tooltip in the top position?

[hsiaalex]

Does anyone know how I can put the tooltip in the top position?

When I set the bounds as per #1100 (comment), my tooltip showed at the top, and was not under other elements. Without the setting, it showed below and under elements.