Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug/53451 always show ckeditor tool bar on screen when scrolling #18083

Merged

Conversation

EinLama
Copy link
Contributor

@EinLama EinLama commented Feb 26, 2025

Ticket

https://community.openproject.org/wp/53451

What are you trying to accomplish?

When you shrink your browser window (aka you are in "moblie mode"), the editor toolbar should stick to the top of the scroll container when you edit a work package description.

Screenshots

image

What approach did you choose and why?

TIL that when any parent of a sticky-element has an overflow that is set to auto , hidden or scroll, the stickiness does not take effect. There seem to be further issues with parents defining a set height, etc.

In our case, the stickiness could be restored by using overflow: clip instead of overflow: hidden. Clip does the same as hidden, but does not open up a new formatting context, preserving the functionality of sticky.

https://benfrain.com/yes-you-can-use-position-sticky-and-overflow-together/

Merge checklist

  • Added/updated tests
  • Added/updated documentation in Lookbook (patterns, previews, etc)
  • Tested major browsers (Chrome, Firefox, Edge, ...)

Copy link
Contributor

@dombesz dombesz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Work as expected, thanks Tobi! Feel free to merge once the CI is green.

This was not working due to the overflow attribute being set to
something else than visible or clip. As `clip` is mostly the same as
`hidden`, I was able to restore the stickiness by using that.

See
https://benfrain.com/yes-you-can-use-position-sticky-and-overflow-together/
@EinLama EinLama force-pushed the bug/53451-always-show-ckeditor-tool-bar-on-screen-when-scrolling branch from dee71d7 to d0357ef Compare February 26, 2025 12:31
@EinLama EinLama force-pushed the bug/53451-always-show-ckeditor-tool-bar-on-screen-when-scrolling branch from 485e0a6 to 152282f Compare February 26, 2025 13:53
@EinLama
Copy link
Contributor Author

EinLama commented Feb 26, 2025

Reran the CI a couple of times. All the remaining red specs are flaky ones that have no cause in this PR, so I'll merge.

@EinLama EinLama merged commit fdc58ec into dev Feb 26, 2025
8 of 9 checks passed
@EinLama EinLama deleted the bug/53451-always-show-ckeditor-tool-bar-on-screen-when-scrolling branch February 26, 2025 15:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

2 participants