search

flarum / issue-archive

0 stars 0 forks source link

Text editor controls have overflow hidden #260

Open clarkwinkelmann opened 5 years ago

clarkwinkelmann commented 5 years ago

Well technically this might be a feature but I'm pretty sure it's an unexpected regression from last beta.

In https://github.com/flarum/core/commit/bf3934d16f166921a8757ca0bce93e93fcf2f3ca @tobscure added horizontal scroll to the editor controls. That's great for mobile.

Unfortunately this means we're subject to this:

Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto (from https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)

Meaning overflow above the text editor is now hidden.

It's now impossible to use a dropdown as a control. Expected:

image

Got:

image

Two of the extensions I'm working with make use of this behavior. One is Flagrow Fonts, the other is my EmojiOneArea extension. They can no longer display any dropdown (or drop-up).

Tooltips still work because they use jQuery and are created outside of the div. But I'd love to not have to rely on jQuery to manage popovers like those.

I'm going to force .TextEditor-controls { overflow: visible; } in those extension's CSS for now as I can't see any easy workaround. I'll just lose horizontal scrolling on mobile...

tobyzerner commented 5 years ago

Any ideas from anyone on the most elegant solution?

luceos commented 5 years ago

Bootstrap 4 (yeah I know) has the boundary option for the dropdown which defines the overflow constraint, it is set to scrollParent by default which is comparable to the current behaviour, but it also allows other settings window and viewport which would be a solution to this issue.

https://getbootstrap.com/docs/4.0/components/dropdowns/#options