Use kind of portals for overlays, toolbars and dropdowns

alexander-schranz commented 3 years ago

📝 Provide detailed reproduction steps (if any)

Create CKEditor
Wrap it into a overflow: hidden; container
Dropdowns, tooltips which are going outside this container will create a scrollbar or will be cutted

✔️ Expected result

Dropdowns, tooltips which are going outside should not effect the container the ckeditor is in it.

❌ Actual result

Dropdown toolbars which are going outside this container will create a scrollbar or will be cutted

Proposal

We in @sulu have also kind of dropdowns and overlays, to avoid problems that things like overlay and tooltips are cutted by some wrapping div with special styling we make the usage of react portals. This means that overlays and dropdowns are not created on the same DOM level like the element, instead it is created outside of it in our case on the document.body. Here an example:

Before

<body>
       <div style="overflow: hidden">
              <div>Button</div>
              <div class="overlay"></div>
       </div>
</body>

After

Instead the react portal we use create the overlay outside of the container and position it at the correct place e.g.:

<body>
       <div style="overflow: hidden">
              <div>Button</div>
       </div>

       <div class="overlay"></div>
</body>

So for the CKEditor it would be great if it is doing the same how we are handling overlays and dropdowns that they are not created on the same level the editor is in the DOM e.g.:

<body>
       <div style="overflow: hidden">
              <!-- ... nested tree -->
                    <div class="ckeditor">
                            <div class="someitem"></div>
                            <div class="sometooltip"></div>
                    </div>
       </div>
</body>

Instead it should render overlay and tooltips outside and position it correctly. This avoids a lot of trouble and handling of z-index and overflow problems:

<body>
       <div style="overflow: hidden">
              <!-- ... nested tree -->
                    <div class="ckeditor">
                            <div class="someitem"></div>
                    </div>
       </div>

       <div class="sometooltip" style="top: 20x; left: 40px;"></div>
</body>

The only thing is that positioning is a little bit harder for tooltip and this thing, but you can get inspiration here: https://github.com/sulu/sulu/tree/2.x/src/Sulu/Bundle/AdminBundle/Resources/js/components/Popover.

📃 Other details

Browser: chrome, edge, firefox (latest version)
OS: tested on mac and windows
First affected CKEditor version: all currently
Installed CKEditor plugins: doesn't effect

Some screenshots used ckeditor inside a overflow: hidden container:

Screenshot 1: tooltip get cut:

Screenshot 1: submenu get cut:

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

oleq commented 3 years ago

We already tried this approach but it results in unacceptable lags and glitches such as

kapture 2018-10-15 at 13 10 45

when the toolbar is sticky to the viewport but the dropdown in the "portal" stays in <body> that gets scrolled.

alexander-schranz commented 3 years ago

@oleq in our case scroll was prevented aslong as the popover is open.

As current workaround to the problem, for all who did upvote this issue. We did replace overflow: hidden; with contain: layout;. As this is maybe not for everyone a solution its a solution for the once which did use the overflow: hidden to avoid vertical scrollbars. The contain: layout; has the same effects for the scrollbars but actually does not effect the toolbars and dropdowns can be going over the container. Its only available for modern browsers: https://caniuse.com/mdn-css_properties_contain safari doesnt support it but actually behave in the default like contain: layout; so it did in our case not have the vertical scrollbars.

oleq commented 3 years ago

@oleq in our case scroll was prevented aslong as the popover is open.

I'm afraid this is not an option for us 🙁 There's no way CKEditor blocks the scroll of the entire web page because there's a dropdown open somewhere in the UI.

CKEditorBot commented 1 year ago

There has been no activity on this issue for the past two years. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

zhi437404 commented 11 months ago

Any updates?

alexander-schranz commented 11 months ago

Want to add something to my issue, a modern solution which we need to wait for support in all major browsers would be the new native tooltip/popup api. Did not yet try it out if it solves the overflow hidden issue but worth a try I think. But native is always better then custom implementation.

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

AlexSanin commented 5 months ago

Any progress here? Maybe there is any workaround to make it work? Maybe some custom build for ckeditor where I can redefine styles or whatever?

ckeditor / ckeditor5