Using Grid inside TabSheet with HeightMode.ROW

Hi
I’m using a tabsheet to switch between several Grids. The tabsheet is placed within a vertical layout followed by other components. The grids are placed as direct children od the tabsheet.

When I switch the tab the TabSheet doesn’t grow to the correct height of the embedded grid and hides the components placed below. The Grid’s are using HeightMode.ROW and therefore getHeight returns -1.

When I resize the browser window everything is rerendered correctly.
Any ideas/workarounds? How can I force a rerendering of the whole page similar to a resire event?

I have had the exact same problem, and it always happens when using a grid in a tabsheet, with the grid being in RoW HeightMo BUT, it doesn’t happen in all cases, so I can’t reproduce this bug with a simple example.

Usually, it happens in a complex layout (Grid in Verticalayout, in tabsheet which is in another tabsheet for example) and the first time the layout is rendered, the grid height is wrongly calculated. A resize of the window (or changing the zoom) always fixes the page, until the next render.

The initial rendering is always correct. Switching the tab yields to false tabsheet heights

Any suggestions? The problem is really annoying…

Having the same problem. Using grids inside a tabsheet. Nothing complex, the tabsheet just sits on a surrounding vertical layout. I have two tabs inside the tabsheet, both showing a grid. The height adjustment is set to HeightMode.ROW. When switching between the tabs the height is not automatically recalculated, causing problems with either a two heigh tab size or a too big tab overlapping the area beneath it. When i resize the window manually it works.

Urgent problem also for us! Hope someone has a solution to fix this…

Anyone found a workaround?

We are using a tabsheet listener to fix that manually. Like so:



addSelectedTabChangeListener(new TabSheet.SelectedTabChangeListener() {
@Override public void selectedTabChange(SelectedTabChangeEvent selectedTabChangeEvent) {
TabSheet tabSheet = selectedTabChangeEvent.getTabSheet();
Layout tabLayout = (Layout) tabSheet.getSelectedTab();
if (tabLayout instanceof Grid) {
// 80 is the height of the tabsheet’s bar and the column header line,
// 29 is the height of a single line
tabLayout.getParent().setHeight
((float) ((PagedGrid) tabLayout).getGrid().getHeightByRows() * 29 + 80, Unit.PIXELS);
}
}
});

You have to maybe adjust the line height (29, we are using the VALO theme) or the header size (80). The grid must be using HeightMode.ROW.

There is a ticket
https://dev.vaadin.com/ticket/17957
related to this issue. Many people are waiting for this issue to be resolved.

Hi, has anybody found a solution to this problem? I need to solve this problem as soon as possible so any help is appreciated, thanks.