CODEWITHSUNDEEP
quill
Namani Supriya
Namani Supriya

Reputation: 71

Quill editor popUp is being cutoff in the left when we try to add link

When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.

The below image shows my issue.

enter image description here

Upvotes: 2

Views: 2535

Answers (5)

Jaydeep Solanki
Jaydeep Solanki

Reputation: 1

**The link tooltip cut off by edge of the React quill editor Conditionally handle: If the link is -negative on the left than replace it with 10px else default position. **

enter image description here

useEffect(() => {
const adjustTooltipPosition = () => {
    const tooltip = document.querySelector('.ql-tooltip');
    if (tooltip) {
        const left = parseFloat(tooltip.style.left) || 0;
        if (left < 0) {
            tooltip.style.left = '10px';
        }
    }
};

const observer = new MutationObserver(adjustTooltipPosition);
const editorContainer = document.querySelector('.ql-container');

if (editorContainer) {
    observer.observe(editorContainer, {
        childList: true,
        subtree: true,
        attributes: true,
    });
}

return () => {
    observer.disconnect();
};
}, []);

enter image description here

Upvotes: 0

Md Shahnawaz Ansari
Md Shahnawaz Ansari

Reputation: 11

From the official documentation Quill is bound to document.body, you need to modify it:

  • Just try this
<div id="quillContainer">
 <ReactQuill
 theme="snow"
 bounds={'#quillContainer'}
 />
</div>

Upvotes: 1

Jo&#227;o Melo
Jo&#227;o Melo

Reputation: 835

i had the same problem.

this github issue comment recommending the bounds config property worked for me: https://github.com/slab/quill/issues/360#issuecomment-584789063

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

new Quill(SELECTOR_CONTAINER, DEFAULT_CONFIG);

Upvotes: 0

Matthieusch
Matthieusch

Reputation: 63

If someone encounter this, by default Quill is bound to document.body. On the instance you can use the bounds property to define your own container where Quill (tooltip, etc...) will be contained: Quill documentation

Upvotes: 2

ben amundson
ben amundson

Reputation: 41

Not the most elegant solution, but you may need to override the css:

.ql-tooltip {
  left: 0!important;
}

Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).

Upvotes: 2

Related Questions