Full size app with scrolling and full size table

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

we are trying to come up with a solution to the following case:

  • 100% of browser window used
  • small resolutions work, in practice meaning that scrolling should work
  • table uses all space that is available

Our current solution is to have main window with full size and a Panel inside it with full size and scrolling enabled. This requires all the layouts inside the Panel to have undefined size, which is manageable.

Now to the last requirement, 100% wide tables:

  • we would like the table to take 100% of the actual width, but we can’t set that because layout doesn’t have width defined (if it had, we would lose scrolling).
  • we want the table to take 100% because of lazy loading: columns are often too small after new wider data is scrolled into, and resizing adds scroll bar to the table. It’s weird to have a very narrow table with a scroll bar, even the screen would have a lot of space.

So my question is in short, how to get table taking all the extra space and allow scrolling to work at the same time?

I don’t have any idea if this is realistic at all, but one generic solution would be to allow the layout to overflow. Like:
verticalLayout.setSizeFull();
verticalLayout.allowOverflow(true); // Size is 100% unless content doesn’t fit. In that case the layout is sized as large as needed.

With this solution there wouldn’t be need to set layouts inside Panel to undefined size to get scrolling.

All ideas and comments are really appreciated!

2

Hi,

You could arrange so that the table is 100% wide, and individually wrap the other (undefined wide) content in 100% wide panel(s) that scroll. This would make the table and the other content scroll individually, of course, which may or may not be ok i your case.

 - window (100%)
    - vert (100%)
       - table (100%)
       - panel (100%)
         - vert (undef)
            - ....stuff (undef/abs)

The other solution I can think of is to figure out how wide the space for the table is (i.e window width) and actually set the width of the table to this value, then let the rest of the content be undefined wide.

Best Regards,
Marc

(let me know if that made no sense, I’ll try to be more verbose :slight_smile:

3

Hi Marc and many thanks for your answer!

This is part of our company wide layout, so we would like scrolling to work automatically without a need for any special component setup (as it does with our current solution). So unfortunately this is not a feasible solution.

If I have understood correctly, this requires to extend the current containers to report back the actual size to the server. Am I correct?

Is there any possibilities for better scrolling support in future Vaadin versions? If it’s easy enough for person not familiar with Vaadin internals I could try to do some experiments.