Styling the scrollbar of a Grid, making it wider and permanently visible

Flow
1

Yet another CSS/styling question from me :-)
I have a Grid with a sub-grid as a component in a column, which places the two scrollbars next to each other.
This makes it a bit hard to use when the scrollbars come and go as well as being rather thin.

There is no part selector for the scrollbar and it seems it is not recommended to change it, but I need to make changes to improve the UI/UX.

I guess it is necessary with a shadow-dom trick, but I can’t figure it out.

Br Mikael

2

Don’t do it - you will regret it :wink: I would suggest to change your inner grid to not use the full space, instead have a little spacing between the outer and inner grid for people to identify both scrollbars and touch them

2 Likes
3

If I recall correctly, that’s a native browser scrollbar, and, last I checked, styling support for native scrollbars is messy and unreliable so it might work on your OS+browser combo, but not in some random other one, which could end up breaking your hack completely, as native scrollbar sizes vary between platforms.

So I concur with @knoobie above: don’t.

1 Like
4

All I can find seem to agree with your caution, so I will heed your advice, both of you and be careful, thanks.

What about just making the scrollbar permanently visible, that at least is easy in standard HTML and CSS!?

5

Also not that simple: while you could override the overflow:auto used in Grid to overflow:scroll to tell the browser to always show a scrollbar, OS settings can still make the scrollbar effectively invisible except when scrolling, and prevent it from taking any space. As an example, on MacOS configured to only show the scrollbar when scrolling, an element with overflow:scroll, the scrollbar won’t take any space in the element, but instead be rendered overlaid on top of it when you’re scrolling. Same with mobile OSs.

You can try it out, but you’ll need to test it in different OSs with different scrollbar settings to make sure it doesn’t break in any of them.

#table {
  overflow: scroll;
}

Also, that element is a non-exposed shadow part inside the Grid (because we specifically don’t want people messing with it as it can easily break the Grid), so you’ll have to use shadow css injection to apply the style, i.e. place the css in <your-theme>/components/vaadin-grid.css.

1 Like