Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
luyimei opened this issue Apr 29, 2020 · 2 comments

Comments

@luyimei
Copy link

luyimei commented Apr 29, 2020

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 pushed a commit to luyimei/quill-mention that referenced this issue Apr 29, 2020
luyimei pushed a commit to luyimei/quill-mention that referenced this issue Apr 29, 2020
@luyimei
Copy link
Author

luyimei commented Apr 29, 2020

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

wooolfgang added a commit to pulsedotso/quill-mention that referenced this issue Jun 12, 2020
Add mentions menu containment feature (quill-mention#142)
@sanghoho
Copy link

sanghoho commented Dec 25, 2023

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants