[5.x]: Horizontal clipping on element indexes

[thupsi]

What happened?

Description

In element index pages the table can be clipped horizontally with no way to scroll:

Craft CMS version

5.0.2

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[i-just]

Hi, thanks for reaching out! As in Craft 4, you should be able to scroll horizontally, and I just verified that it works as expected for me. If you can't scroll horizontally, can you please let me know what browser you’re using and if you see any errors in the console?

[thupsi]

Doh, you're right! I'm embarassed to say that, in the absence of a scrollbar, I didn't think to use the keyboard for horizontal scrolling. I wonder if the UI would benefit from a subtle scrollbar, even from an accessibility standpoint?

[brianjhanson]

The appearance of the scrollbars is handled on the OS level. If you're on Mac you can set them to be always visible via the "Show scrollbars" setting in Settings > Appearance.

By default, the scrollbars appear at the bottom of the scrollable area. In this case, that means it's off the page and then hidden by the footer until you scroll all the way to the bottom. That's not ideal, but it's also the browser's default behavior, so it feels like swimming upstream to try to alter it too much.

I did open #14781 to add some shadows to the scrollable area, but as I mentioned in the description, it's a lot of code for a relatively minor UX gain. We can't use some of the CSS hacks out there because those all seem to rely on a solid background for the illusion.

We have a few other ideas that I'm going to explore, so hopefully, we can improve this a bit in the near future.

[thupsi]

Thanks @brianjhanson, that was impressively quick! Adding to the ideas (if you haven't already thought of it): When the 'scroll-timeline' CSS becomes stable it should help reduce the js too (no need to detect the overflow via javascript).

[brianjhanson]

We ended up dynamically setting the height of the tablepane and un-sticking the footer so the scrollbars will always be visible when there's an overflow. Since it's a slight change in behavior, that change is currently slotted for 5.1.

[thupsi]

Sounds good, thanks again!

[thupsi]

@brianjhanson I was thinking about this and even tried it manually on a project to see how it feels. One concern is that it could lead to double scrollbars (table and page), which generaly feels and looks kinda awkward. Also you have to move the mouse over the table to scroll. If people don't like it when this ships they will trace it back to me and burn my house 😜.

Was curious how others have solved it and Shopify has a pretty good version where the table height is not constrained, but the horizontal scrollbar is fixed to the viewport bottom.

Maybe something worth considering. Just saying, in no way implying that you should blindly copy what Shopify does 🙂

[brandonkelly]

How is that even possible? Gotta be a hack, right? Maybe they are setting a parent container to the original height (so the full page height stays the same), then constraining the <table> height but adding overflow-y: hidden, and adjusting the table height as you scroll down.

[brianjhanson]

I'm guessing they do something like this technique which throws a fake scrollbar down there and links up the scroll events between it and the container.

[thupsi]

Yes, I suppose they are doing something like the technique you shared. Did a quick search before and found a fiddle almost exactly like that.

[brandonkelly]

That seems like the ideal solution, if you want to give it a go, @brianjhanson!

[brandonkelly]

Craft 5.1 is out with the first pass at a fix for this.