I’m pulling my hair because I cannot get a TreeTable to shrink to the height of the browser window.
If I try it on a maximized browser window in a medium-sized screen, then my TreeTable looks fine - it expands to almost the bottom of the screen / browser height and a vertical scroll bar appears. That’s fine.
Instead, if I manually resize the browser window to, let’s say, half the height of the screen, clear cache and everything and reload it, my treetable is cut at the botttom of the browser window - it grows far “below” it and, although the vertical scroll bar appears, I can’t ever see the last elements of the TreeTable because it is cut itself, hidding a bunch of rows that become unreachable (no scrollbars appear in the containing component, which is a VerticalLayout, which is itself contained in a TabSheet tab, which at the same time is contained in another VerticalLayout).
I’ve tried a lot of combinations, from setting Height to 100% programatically to doing it in CSS (fully recompiling in this case, also clearing my browser cache everytime and so on) to setting expandRatio to 1 for those components that support it, etc.
No luck.
There might be something in TreeTable, it is an old component.
However, as a workaround I would propose either to use Panel instead of VerticalLayout, since Panel has a scroll bar by default. Another approach is to tweak that VerticalLayout with CSS, i.e. give it style name and add “.overflow visible” to it, to get a scroll bar.
Well, although not my preferable option since a panel doesn’t fit very well inside a Tabsheet tab, I gave it a try just to see what it would happen.
Results are exactly the same, though. Panel grows to the height of the content (that is, a TreeTable - plus a couple of Labels after it with some text) of the VerticalLayout that is inside it. In fact, the sampler demo of Panel (https://demo.vaadin.com/sampler/#ui/structure/panel) uses that - a VerticalLayout inside the Panel. Thus I don’t see how this could help, as I’m simply adding a new layer of around what I already had, which was outgrowing the browser window size…
By the way, I also tried the “overflow: visible” approach. Did it in several divs / layers / LayOuts, adding them on-the-fly via developer tools, to no success. The only that partially worked, at least in Chrome (haven’t tested it yet in Firefox nor in IE/Edge because haven’t found a definitely solution yet), was adding an “overflow: scroll”, but to the Layout that served as an envelope for both my left menu and the main content area. This leads to the problem of my left menu going out of the screen to a new line, to the bottom left of the main content, because I was using calc(100% - leftMenuWidthInPixels) to “dynamically” calculate the width of the content area. Width of the now added scroll bar doesn’t seem to be taken into account into this calculation, thus breaking my design
In my maremagnum of nested layouts, views, tabs and so it seems I forgot to add a .setHeight(“100%”) to my TabSheet! Also I double checked that all the parent components had their size to .setSizeFull().
Have to note, though, that in the process of finding a viable solution I found that enveloping my TabSheet component with a CssLayout with size set to full and an “overflow: scroll” CSS property made finally a vertical scroll bar to appear, although this was less “aesthetically preferable” because the scroll bar was always present (altough disabled when there wasn’t enough content to scroll), including the tab selection area. Trying this same approach but wrapping the tab content with a CssLayout didn’t work, because although the scroll bar was also present, it was always disabled.
