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

Additional (unnecessary) scroll bar appears on nodegroups containing rich-text widget (Chrome, Edge, not Firefox). #11713

Closed
CWDamm-Kint opened this issue Jan 6, 2025 · 5 comments

Comments

@CWDamm-Kint
Copy link
Collaborator

Several pages have an unnecessary scrollbar (red arrow), resulting from the body element very slightly overlapping the html element.

When you scroll down the small amount possible, you can see a thin line of whitespace below the sidenav (blue arrow), suggesting this overflow is only by a single pixel.

Arbitrarily reducing the height of the sidenav and main section elements doesn't remove the issue, suggesting it's just the body itself that's overflowing.

Beyond aesthetics, this scrollbar can cause some accessibility issues, especially at higher zooms, as seen in #11654

Unecessary scrollbar

@chiatt chiatt added this to pipeline Jan 6, 2025
@chiatt
Copy link
Member

chiatt commented Jan 9, 2025

This doesn't seem to occur using on a mac using Chrome. What browser are you using @CWDamm-Kint?

@CWDamm-Kint
Copy link
Collaborator Author

CWDamm-Kint commented Jan 10, 2025

Hi @chiatt, @SDScandrettKint and I have managed to narrow it down a bit more (he couldn't replicate it at first either). It seems that once you go onto a node with a rich text widget, this scroll bar appears and stays there, even when you move away to other nodes. We've managed to replicate it in AFHER and Arches 7.6, on both Chrome and Edge. But not Firefox, interestingly.

Scrollbar.replication.video.mp4

@SDScandrettKint SDScandrettKint changed the title Unnecessary scroll bar Additional (unnecessary) scroll bar appears on nodegroups containing rich-text widget (Chrome, Edge, not Firefox). Feb 11, 2025
@CWDamm-Kint
Copy link
Collaborator Author

A div with class .cke_screen_reader_only appears to be causing the scrollbar. It appears after editing any node containing the ckeditor (e.g. as part of the rich text widget), then persists even after navigating away. The div is related to screen readers and is not intended to be visible, hence why it is only 1px high and wide.

@SDScandrettKint
Copy link
Member

Have pushed a PR with a CSS fix targeting cke_screen_reader_only #11785.

It's important to note, this issue isn't just affecting the rich-text widget, but also all ckeditor locations e.g. resource layers in map layer manager, as well as the nodegroup card view in the graph (shown below).

Image

Image

@SDScandrettKint
Copy link
Member

Closed by #11785

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

No branches or pull requests

3 participants