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

Multiple scrollbars appear if the left black menu is too long #8790

Open
skiokko opened this Issue Aug 9, 2018 · 7 comments

Comments

Projects
None yet
7 participants
@skiokko
Copy link

skiokko commented Aug 9, 2018

Multiple scrollbars appear if the left black menu is too long, is also not good to have 2 scroll bars, you need to customize one and make it a custom sidebar smaller and tinier.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Aug 9, 2018

See also: #8068, which is caused by this issue. EDIT: Apparently not, since that issue appears to have been fixed at some point while this issue still exists.

@designsimply designsimply changed the title Multiple scrollbars. Multiple scrollbars appear if the left black menu is too long Aug 9, 2018

@designsimply

This comment has been minimized.

Copy link
Contributor

designsimply commented Aug 9, 2018

Adding a screenshot for reference:

screen shot 2018-08-09 at thu aug 9 4 43 03 pm
Seen at http://alittletestblog.com/wp-admin/post.php?post=14189&action=edit running WordPress 4.9.8 and Gutenberg 3.5.0 using Chrome 67.0.3396.99 on macOS 10.13.6.

@abrightclearweb

This comment has been minimized.

Copy link

abrightclearweb commented Aug 10, 2018

I've noticed the same thing. Here's a situation in the Gutenberg demo where there are 3 scrollbars in the UI. I have a lot of plugins installed so the menu is long.

  1. Left of Settings panel. Scrolls up and down the Gutenberg content.
  2. Right of Settings panel. Scrolls up and down the Paragraph block settings.
  3. Right of the screen. Scrolls up and down the page to see all the menu items.

gutenberg 3 scrollbars

It's not that great from a UX point of view to have multiple scrollbars.

@rogerlos

This comment has been minimized.

Copy link

rogerlos commented Aug 16, 2018

The document is gaining the scrollbar on the right (at least in firefox) from edit-post-toggle-panel. On my machine, its height is 71 pixels, which is exactly the amount of scroll the document exhibits.

The likely cause of this is that though this panel is floated right, it is after edit-post-layout__content, and therefore I believe its height is taken into account somewhere in the rendering engine, though firefox's inspector is very unhelpful in pinpointing the offending item.

As a quick check, changing position:relative to position:absolute on edit-toggle-publish-panel eliminates the document scroll bar.

@rogerlos

This comment has been minimized.

Copy link

rogerlos commented Aug 16, 2018

(I should note there are at least two self-clearing divs below this panel in the DOM, though they are a few layers up in the stack, as it were.)

Instead of float:right and top: -9999em to hide it, how about position:absolute, top: -9999em and right: 0? I haven't looked at the code, but I assume if it needs to be shown the value of top is changed? This should not affect that behavior...eh? Hopefully?

@fienen

This comment has been minimized.

Copy link

fienen commented Dec 4, 2018

This issue was brought up 2700 tickets ago in #6094. That issue was closed without resolution, and the opinion left was basically "oh well." At least this one still has some gas in it, even if it's getting old. I think we need someone taking a serious look at it though.

This is both a failed user experience, and an accessibility pot hole for anyone with mobility or muscle control issues. I have full use of my noodly appendages, and it constantly captures my mouse and screws up my scrolling. Imagine how frustrating it's going to be for anyone with less control. It's a bad approach, and when people really start using Gutenberg after it drops in a couple days, packed with all their plugins and whatnot, you're gonna see a lot more people raising noise about how ugly and confusing this is. UX matters.

The solution to this should be simple, right? Can we not just let the longest container control the document height like would be standard practice? I'm not sure I can think of a single produce I use where this pattern is employed or accepted.
dsz4byuu8aala13

@talldan

This comment has been minimized.

Copy link
Contributor

talldan commented Dec 4, 2018

Just thought I'd also mention that Fullscreen Mode does help get right of the main scrollbar and reduces things down to two scrollbars. I know it's not the answer to a lot of the criticism, but it could help some.

Can we not just let the longest container control the document height like would be standard practice?

@fienen This seems like it'd make it difficult to change the block settings in the sidebar for a block that's at the bottom of a long post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment