Scrollbars in vaadin-grid (Flow 14)

Flow
1

Hello!

Vaadin Grid (Flow 14) shows scrollbars (h and v) if they are needed. Safari on Mac looks great because the are only visible when user scrolls.

But under Windows 10 (Edge, Mozilla, Chrome) theses scrollbars are visible all time.

How can I hide the scrollbars? The beahaviour showing when user scrolls is ok (like macOS does).

I found this by google search, but it does not work.

<dom-module id="my-custom-grid" theme-for="vaadin-grid">
  <template>
    <style>
       :host([theme~="my-custom-grid"]

) {
display: block;
height: auto;
}

       :host([theme~="my-custom-grid"]

) #fixedsizer,
:host([theme~=“my-custom-grid”]
) #outerscroller {
display: none;
}

       :host([theme~="my-custom-grid"]

) #table {
overflow: hidden;
}


Can anybody help?

Cheers,
THomas

2

I just tested latest version of Vaadin Grid (vaadin-grid-flow) on Windows 10 Edge and it doesn’t seem to be an issue at least when running the Grid demos they work as they should and scroll bars are only shown when needed. E.g. the first demo “Grid Basics” doesn’t have any scroll bars. Custom theme should not be needed (but a custom theme may cause similar issues).

Can you share more details about how your Grid is configured or preferably a minimal sample project that reproduces the issue (if you can share one)?

I would guess the problem is probably caused by the way you’ve configured grid/columns or by some custom styles.

Are you using the Material theme? There recently was an issue related to extra scroll bars showing in Grid when using Material theme but that was already fixed some time ago and shouldn’t be an issue anymore if you’re running the latest version: https://github.com/vaadin/vaadin-grid/issues/1599.

And btw in macOS it depends on OS configuration whether scroll bars are hidden by default or not (from “System Preferences / General / Show scroll bars”). I think the default is to show them only when scrolling but I prefer to have it set to show “Always” so it’s easier to see scrollable areas even when it’s not otherwise obvious that something is scrollable.

3

Kari Söderholm:
I just tested latest version of Vaadin Grid (vaadin-grid-flow) on Windows 10 Edge and it doesn’t seem to be an issue at least when running the Grid demos they work as they should and scroll bars are only shown when needed. E.g. the first demo “Grid Basics” doesn’t have any scroll bars. Custom theme should not be needed (but a custom theme may cause similar issues).

Can you share more details about how your Grid is configured or preferably a minimal sample project that reproduces the issue (if you can share one)?

I would guess the problem is probably caused by the way you’ve configured grid/columns or by some custom styles.

Are you using the Material theme? There recently was an issue related to extra scroll bars showing in Grid when using Material theme but that was already fixed some time ago and shouldn’t be an issue anymore if you’re running the latest version: https://github.com/vaadin/vaadin-grid/issues/1599.

And btw in macOS it depends on OS configuration whether scroll bars are hidden by default or not (from “System Preferences / General / Show scroll bars”). I think the default is to show them only when scrolling but I prefer to have it set to show “Always” so it’s easier to see scrollable areas even when it’s not otherwise obvious that something is scrollable.

Hello Kari!

I used the sample https://labs.vaadin.com/business/accountants as starter. If you go to accountants and select one there is a scrollbar visible on Windows 10 Edge.

Greetings from Germany,
Thomas

4

I just tried https://labs.vaadin.com/business/accountants on Win 10 Edge and I see no problem. If the page is full screen I only see a vertical scroll bar (since all entries don’t fit into view without scrolling), but if I make the window narrower horizontally (or select one entry so that the sidebar opens) so that all columns don’t fit into screen then the horizontal scroll bar also appears.

Actually the only problem I see there in that demo is that on Safari the grid doesn’t show any scroll bars no matter what. It doesn’t show even while scrolling or if the window is super small. On macOS Chrome it works fine (same as e.g. on Win 10 Edge). I think it’s a bug in the Business App demo.

5

Hello Kari!

Thank you very much.

Than I have to look at the code of the starter app.

In Vaadin 8 it was possible to hide scrollbars. In Vaadin 14 I do not want to see scrollbars in grid (sometimes). A general flag for showing scrollbars would be nice. Of course this depends on the operating system.

Greetings
Thomas

6

First I thought your problem is that the scroll bars are always showing on Win 10, but that doesn’t seem to be the case.

So it seems you want to actually always hide the scrollbars from the grid (on all browsers)?

This should be doable with a custom theme like:

<dom-module id="my-custom-grid" theme-for="vaadin-grid">
  <template>
    <style>
       :host([theme~="my-custom-grid"]
) #table,
       :host([theme~="my-custom-grid"]
) #outerscroller {
         overflow: hidden;
       }
    </style>
  </template>
</dom-module>

At least when I manually toggle overflow: hidden; on both those elements via dev tools it seems to work. Though I’m not sure if this specific CSS will cause some other issues but from quick testing it seemed to work for me at least on Chrome.

Just make sure your grid has the attribute theme="my-custom-grid" for that style to apply to the grid (e.g. grid.addThemeName("my-custom-grid")). Or you can remove the :host([theme~="my-custom-grid"] ) part from the above styles if you want it to always affect all grids in your app.

I’m not sure what’s happening in the Business App demo since that seems to be only hiding them on Safari but leaving the default behaviour on other browsers. Not sure if that’s intended.

Though I would suggest not hiding the horizontal scroll bar via styles (so it appears when needed) since hiding that would make it impossible to scroll the grid horizontally if the user doesn’t have a touch screen or a touch pad or other custom actions configured for horizontal scrolling. Though it’s also possible that a user would use eg. a windows laptop without a mouse and not have even vertical scrolling configured for the touch pad so they would need to be able to see the scroll bar to be able to drag on them to scroll. I guess that’s pretty uncommon nowadays though. I guess most laptops nowadays have at least vertical scrolling configured on the side of the touch pad or via two finger drag.

Just beware that hiding scroll bars can be a usability issue. If you only want to forcefully hide the vertical scroll bar just use overflow-y: hidden; instead.

7

Hello Kari!

Very good. That solved my problem. I will think about your tips and discuss a solution with my customer.

Thank you very much und many greetings,
Thomas