Grid vertical scrolling

I have some Vaadin 7 code that, for Table, allows me to size things such that I can vertically scroll just the table content. If I replace the Table with Grid, it does not let me scroll just the Grid content ( which the sampler proves is possible ). Obviosly, I can scroll the VerticalLayout that contains the Grid, just not the Grid content itself.

Structure ( only impacted section ):
VerticalLayout
HorizontalLayout ( title bar/toolbar )
Grid OR Table

Any ideas? I am about to enable debug mode ( ?debug in URL ), so it would also help to know what to look for there.

Update 1/17/2018:
setting VerticalLayout to setSizeFull, HorizontalLayout to expand ration 0.3 ( or 0.5 ), and Grid OR Table to expand ratio 3 makes things a little better. In fact, as I guess we would expect, for the “Table”, it is perfect. But for “Grid”, the vertical scrollbar is far to big, and when you scroll down, the scrollbar goes out of the window.

I comment out the Table lines and uncomment the Grid lines, going back and forth, to test the 2 situations. Don’t know if that helps or not.

Also, in this case “?debug” was useless.

Have you tried setting the grid height by rows? When the row count exceeds the number of rows, the scrollbar is activated.

grid.setHeightByRows(30);

yes, I did that, but it is not acceptable for most users. As an example, setHeightByRows( 10 ) looks perfect on my Mac monitor, but I know for a fact leaves lots of whitespace on my boss’ monitor. That is often the problem with either setPageLength ( Table ) or setHeightByRows ( Grid ): you run the risk that while the smaller number looks good for you, it shows lots of wasted whitespace on other resolutions if the Table/Grid happens to be the last thing in the VerticalLayout.

With Table, it fills the page and looks good, even when setPageLength longer then I have visible on my monitor. But with Grid, I get a huge vertical scrollbar when I set setHeightByRows(30). I mentioned this in my 1/17 update. See attachments.

If push comes to shove, I will just let the users deal with the wasted whitespace at the bottom. Not ideal, but won’t hinder their work either.
40906.png
40907.png

an update: for the problem above, I finally gave up and used the suggestion given.

But then I was converting another table to grid and hit a similar problem. There has to be another and better way to solve this. How have others solved this?

How is it that a Table works perfectly but a Grid does not in such similar places ( see my pictures in the prior post )? Yes, I know from an API perspective Grid is not a dropin replacement for Table, but I am confused as to why it is not a dropin replacement from the perspective of layouting. What am I missing?

It still doesn’t work. The vertical scrollbar cannot be scrolled using a mouse, its a show piece.