Wysiwyg-editor: stickyToolbar & overflowed scrollableContainer not working as intended

[Mboulianne]

Expected behavior.

The toolbar should always stick if a scrollableContainer is specified.

Actual behavior.

When there the page and the scrollableContainer have a scrollbar, the toolbar won't stick as it should if the page scrollbar is at its top-most or bottom-most position.

Steps to reproduce the problem.

1- Make sure page scrollbar is at its topmost position.
2- Scroll the scrollbar in the scrollcontainer
3- Toolbar didn't stick :(
4- Do the same with scrollbar at its bottom-most position.
5- Toolbar didn't stick.
6- Put the page scrollbar somwhere between its top-most position and its bottom-most position.
7- Scroll the scrollbar in the scroll container.
8 - Toolbar did stick!!!

See jsfiddle https://jsfiddle.net/ppyLhnqt/65/

To make sure everything is clear I'll put some screenshot
1- Page scrollbar is at its top-most position.

The toolbar isn't visible anymore. It didn't stick.

2- Page scrollbar is at its bottom-most position

The toolbar isn't visible anymore. It didn't stick.

3- Page scrollbar is somwhere in the middle

The toolbar is visible. It did stick.

OS.

Windows 10

Browser.

Firefox 61.0.1 (64-bit)
Chrome 67.0.3396.99 (Official Build) (64-bit)
Edge Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134

[Mboulianne]

@gabra20

[stefanneculai]

That is because the height of the view is smaller than 500px and the editor is designed to keep the toolbar at the top when it exceeds the scrollable container. If you would set it to a value smaller than the height of the view all is good: https://jsfiddle.net/froala/ppyLhnqt/70/.

[Mboulianne]

new jsfiddle: https://jsfiddle.net/ppyLhnqt/103/

how do you explain that I'm getting that now?

The toolbar appears below my scrollContainer. I've hadded content before and after my container to represent my real use case

Also

If I only scroll the page (not the scroll container) the toolbar don't stick at all.

It looks pretty buggy to me.

@stefanneculai

[stefanneculai]

Thanks for the further details. Indeed, it appears to be a problem. I updated it accordingly.

[Mboulianne]

I think I found a similar bug:
My editors are contained in a fixed container that lies at the end / bottom of the body tag with top: 0; bottom: 0; left: 0; right: 0; (it take the whole viewport). If the body has enough content to make a scrollbar appear and if that scrollbar is scrolled, editor toolbar won't stick correctly

jsFiddle:
https://jsfiddle.net/184f7zpd/63/

Body has no scrollbar =>

(everything is ok)

Body has a scrollbar but the user haven't scrolled yet =>

(everything is ok)

Body has a scrollbar and the user have scrolled =>

Buggy!

@stefanneculai

I think toolbarSticky should work correctly even if the editors are in a fixed container no?

[stefanneculai]

Related to https://github.com/froala/wysiwyg-editor/issues/2981.

[Mboulianne]

@stefanneculai are you sure these are related? My bug is about the toolbar that isn't positionned correctly. However, I opened a similar bug https://github.com/froala/wysiwyg-editor/issues/3038 ?

[stefanneculai]

Yes, they are related because they use the same logic for positioning inside a scrollableContainer.

[Mboulianne]

@stefanneculai ok we'll see once this get resolved then. It's not a big deal for us since we found a workaround.

[loocaworld]

Is this bug fixed?

[JessieCowie23]

Is a fix for this still in the works? I'm having the same issue in 3.0.6

[Spankyed]

Such a simple issue faced by many, yet 3 years later still no accepted solution.