search

froala / react-froala-wysiwyg

React component for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
564 stars 130 forks source link

Popups and Dropdowns are clipped by container with `overflow: auto` #262

Open ghost opened 4 years ago

ghost commented 4 years ago

Expected behavior.

Popups and Dropdowns should not be clipped, when the editor resides in a container where an overflow other than visible has been specified.

Actual behavior.

Both popups and dropdowns get clipped. Most other frameworks/libraries etc, work around this by attaching floating elements to the document body. The scrollableContainer property seems to suggest it is used for this purpose, but Dropdowns/Popups are still attached to the button from which they are triggered.

Steps to reproduce the problem.

As witnessed in the following codesandbox, selecting the fontFamily/fontSize/Color dropdowns, displays associated dropdowns/popups clipped by the parent container.

https://codesandbox.io/s/froala-autofocus-forked-dyn8v

Editor version.

froala/wysiwyg-editor@3.2.2 and react-froala-wysiwyg@3.2.2-1

ghost commented 4 years ago

I've seen other tickets suggesting that the soilution is to set overflow: visible on the parent. While this does 'solve' the issue, it is not an acceptable solution.

ghost commented 4 years ago

Also filed with froala/wysiwyg-editor