search

quill-mention / quill-mention

💬 @mentions for the Quill rich text editor
https://quill-mention.com/
MIT License
730 stars 267 forks source link

Is there a way to position the popup relative to the container quill editor? #142

Open luyimei opened 4 years ago

luyimei commented 4 years ago

The defaultMenuOrientation option position the popup-mention-list relative to the browser window. For example, it will position the popup at left when met the browser window right edge. Is there a way to position the popup relative to the container quill editor? I run into a problem that the popup is cropped and i find out no way to fix it due to the weird css overflow behavior

luyimei commented 4 years ago

I have submitted a PR, and I test it inside my project and it works as expected. Please take a look :)

sanghoho commented 8 months ago

I realize this issue is from a while back, but I wanted to share my experience as I ended up here while troubleshooting a similar concern. In my case, I was using ReactQuill along with quill-mention, and encountered an issue where the mention list was being cut off due to a parent container having an overflow setting applied.

I found that adjusting the positioningStrategy: 'absolute' | 'fixed' | 'normal' option in quill-mention to 'fixed' resolved the cut-off issue of the mention list. Specifically, this change moves the mention list from being positioned 'absolute' within the .ql-editor to essentially functioning like React's createPortal, attaching it directly to the body element. This effectively makes it immune to the overflow settings of any parent elements.

I hope this insight might prove useful to others who are exploring different ways to position the popup in relation to the container quill editor, especially if they are encountering similar challenges :)