You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a Quill instance inside a scroll container (overflow: auto). Sometimes the Bubble toolbar is positioned so that it is clipped because it exceeds the scroll container. The user has to scroll manually to bottom to make the toolbar fully visible. That's bad UX.
The screenshot shows an example of poor positioning: why places Quill the toolbar below the selection when above would be enough room?
I already use a bounds Element and it works as expected.
z-index would not help here. As the toolbar is a child element of the scroll container to my knowledge its impossible for the toolbar to escape the container.
So one approach would be to scroll automatically in case the toolbar is positioned poorly. Every time the toolbar becomes visible I would check if it is fully visible, and if not scroll the container accordingly. But how can I register an event handler that is fired every time the Bubble toolbar becomes visible?
Another approach would be to avoid poor toolbar positioning in the first place. But how?
The text was updated successfully, but these errors were encountered:
jri
changed the title
Can I react when the Bubble toolbar becomes visible?
Bubble toolbar is positioned poorly
Dec 3, 2019
I have a Quill instance inside a scroll container (
overflow: auto
). Sometimes the Bubble toolbar is positioned so that it is clipped because it exceeds the scroll container. The user has to scroll manually to bottom to make the toolbar fully visible. That's bad UX.The screenshot shows an example of poor positioning: why places Quill the toolbar below the selection when above would be enough room?
I already use a
bounds
Element and it works as expected.z-index
would not help here. As the toolbar is a child element of the scroll container to my knowledge its impossible for the toolbar to escape the container.So one approach would be to scroll automatically in case the toolbar is positioned poorly. Every time the toolbar becomes visible I would check if it is fully visible, and if not scroll the container accordingly. But how can I register an event handler that is fired every time the Bubble toolbar becomes visible?
Another approach would be to avoid poor toolbar positioning in the first place. But how?
The text was updated successfully, but these errors were encountered: