Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Table and scrolling
I have a strange problem with a table which is larger (wider and higher) than browser window will not show scollbars whatever I do.
I have horizonal layout as main content pane. On the left side i have some controls (accordion).
On the right side, the controls create a table with 20 columns and around 3500 rows. The table should fit in the remaing size, respectively the surrounding panel should fit the remaing size and show scrollbars for the overcoming size of the table.
The Size HorizontalLayout is set to undefined, the right layout (which constist of a an VerticalLayout which contains the title label, and the Panel with the table in it) is also set to undefined. Only the table is set to setSizeFull.
I tried every combination of setSizeFull or setSizeUndefined of all components but cannot get the surrounding panel to show scrollbars, It always extends the main layout so the browser shows the scrollbars, which makes the whole page to scroll.
All googleing didn't help so far. Can someone give me a hint how to accomplish this without using windows?
HorizontalLayout should be sizefull. Hmmm why does your table need a panel? This might be the problem. The panel's content should be sizefull.
Emmanuelle Victoria: HorizontalLayout should be sizefull. Hmmm why does your table need a panel? This might be the problem. The panel's content should be sizefull.
I first tried it without a panel but I read here: https://vaadin.com/book/-/page/layout.panel.html
that a panel is necessary to have scrollbars. Removing the panel doesn't change anything.
I got it working in the meantime using absolute layout (for testing only) but it must be possible to do this without absolute layout
You can't have a relatively sized component inside a component with undefined size (in a particular dimension), as having expand-to-fill inside shrink-to-fit layout creates a sort of a paradox.
What I think you need here is that all the Accordion, Panel, and Table have 100% height.
Then, to get the horizontal scroll bar in the Panel, you must have undefined width for the Table, but 100% width for the Panel, as well as the Accordion.
- Accordion: full size - Panel: full size - Table: 100% height, undefined width
All components from ui's content to the table should have 100% height..