As much as I like the new Grid it has a caveat that prevents us from using it.
Let’s say you want to display data in a Grid which has 8 columns. The value lengths are dynamic so you cannot really define fixed sizes without omitting some information.
When you have users (“Group A”) that use their Browser window in full screen on larger resolution monitors: no problem, they see all columns.
But when users (“Group B”) are not using their Browser window in full screen - or have monitors with no so high resolution - they won’t see all columns at first sight. I know that this is from a users perspective solvable by using the horizontal scrollbar.
So where is the caveat?
The Table component just wrapped the content for Group B users so that they were capable to see all content at once. Maybe not in it’s full beaty because of the value wrapping in the rows.
Now with the Grid they may not be aware that there are more columns as they see at the moment when they open it.
There is no visual indication that they can scroll further right to see more content.
So I’m either looking for a way to imitate the Table behavior (row wrapping) - or something like showint the horizontal scrollbar always when available columns aren’t visible.
Anybody run into this situation? I haven’t found a way doing this.
As part of the Framework team, the Grid falls under my responsibilities…
I couldn’t replicate the behavior you describe with Sampler -
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/renderers shows correct behavior under both Firefox and Chrome on my Linux workstation; i.e. when I resize the Grid to be smaller than required to accommodate all items at once, a horizontal scrollbar appears.
Any way, as The Book says, the scrollbars are custom in the Grid, and have CSS class names
v-grid-scroller, v-grid-scroller-horizontal and v-grid-scroller-vertical
you could override those in your theme to make them always visible, if (for some reason) theming issues make them invisible.
If that doesn’t help, could you please post more information about what Vaadin version you’re using, and what client OS and browser you’re running? Thanks.
sorry for the late reply (vacation time). Your example with the Sampler shows perfectly what I mean.
Dependent of the browser window size when a user opens a view with the contained grid not all columns may be (initially) visible. So if a user opens the application in a small browser window (i. e. on a small resolution monitor, see NotAllVisible.png) he may not see the “Tools” column compared to a user who opens the same application with a larger browser window (AllVisible.png).
The user with the small browser window gets no indication that there are more columns and can easily miss content/functionality in that case.
In my current use case I’ve an application with localized column header names (so different column widths) and content with an undetermined length.
What I’m here looking for is either a way to display the scrollbar permanently when some of the grid content is “out of sight” for the user - so that he has always an indication for scrolling.
Or - that’s probably my preferred way - disable/prevening the horizontal scrolling feature and instead auto-shrink the width of the grid columns to the effective grid width. I know that I can do that (partly) with a BrowserWindowResizeListener hacking way but an out-of-the box way would be preferred.
So, having asked around, it appears this is default behavior for a Mac with a touchpad attached - the scrollbars are very visible on normal Windows and Linux systems. People also tell me this might be something that can be affected in the settings for Safari or the OS…
