Confused about height calculation of components inside CssLayout

Hello all,

I am having a bit of a problem with some height calculation in my Vaadin app.

The case is as follows :

I have a VerticalSplitPanel which consists of 2 CssLayouts. One for the top part and one for the bottom part.
Each of those CssLayouts have their size set to full, so they fill up the top and the bottom of the SplitPanel nicely.

After rendering the page both CssLayouts get a height of 250px (find this by using firebug).

The CssLayouts both have the same content :

  • A HorizontalLayout with a height of 50px
  • A table which should fill up the remaining space
  • A CssLayout with a height of 20px

The problem I have now is that I can’t get the table to take up the empty space. I tried setting the table size with setSizeFull(),
but the table will get a height then of 250px (same as the parent CssLayout).
I expected the height of the table to be 180px (the height of the parent CssLayout minus the HorizontalLayout of 50px and the CssLayout of 20px).

Could someone help me with this?

Thanks in advance.

With the table in the middle, try: setHeight(“100%”)

Cheers

I tried this, but the setHeight(“100%”) gives the same results as a setSizeFull()

I tried using a VerticalLayout as parent instead of a CssLayout and then the height gets calculated correctly.

Unfortunately, using a VerticalLayout instead of a CssLayout on that page has quite a large impact on performance, especially when sliding the SplitPanel. So, this is not really a solution.

I was wondering if I can maybe override a method of the CssLayout where the height gets calculated and maybe do the substraction myself.

Or maybe some other ideas?

From the CssLayout doc:

“CssLayout is a layout component that can be used in browser environment only. It simply renders components and their captions into a same div element. Component layout can then be adjusted with
css
.”

You may need to use css; but take a look at the rest of the doc, particularly on “Relative sizes”.

Cheers.

That’s one of the main differences between Vertical and CssLayout: for relative component sizes, CssLayout always calculates that from the size of itself, not from the available space left over from non-relative sized components. Hence 100% size will always mean exactly the same size as the layout itself.

To overcome this, you could try using absolute positioning for the Table:

// CSS
.v-csslayout {
   position: relative;
}

.v-table-inside-csslayout {
  position: absolute;
  top: 50px;
  bottom: 20px;
  height: auto !important;
}

NOTE: this will not work in IE6.

Other major difference is the lack of alignment support in CssLayout (but this can be done using CSS).

Well, that’s good to know. We settled for the VerticalLayout.

Thanks for the help.