Layout Expanding Height Problems

Hi All,

I made a picture to explain my problem more easily:

I have a (black) vertical layout that has two components: the top one (red) should expand to fill all available space. The bottom one (blue) is a HorizontalLayout which should only be as tall as necessary. From what I can tell, this means the blue HorizontalLayout should have its height set to undefined. The blue HorizontalLayout has two labels (green) in it, each should take up 50% of the available width. Now, if one of the green labels takes up two lines of space (i.e. the text is too wide), then it become taller than the other green label. Since the blue HorizontalLayout has an undefined height, I can’t set the height of the green labels to 100%, as this violates Vaadin’s paradox regarding percentage sizes inside undefined sizes. This means that the height of the smaller green label ends up being smaller than the height of the taller green label. How can I get both green labels to be the same height, which is the tallest necessary to contain all content?


Did you ever solve this? We are still seeing this problem with the Valo theme in Vaadin 7.3! It appears that expand ratio for vertical/horizontal layouts only applies in the direction of the layout, not the “other” dimension.

In the client, the individual components are assigned explicit heights based on their contents, even though the server-side components have both width and height set to 100%.

Hi Greg,

I’m very sorry for the lengthy delay in responding; I’ve been particularly busy lately. Ultimately, we haven’t solved this particular problem in the vaadin layout system, and I don’t believe it can be solved strictly using their system. What we ended up doing is setting undefined heights for everything, and then using CSS to do the actual height definitions.

The expand ratio does indeed only apply to the primary axis of the layouts; it was never intended to work the opposite direction. As far as your second paragraph, that’s due to the Vaadin layout system considering the mentioned layout (a component with 100% height inside a component with undefined height) a “paradox”, and therefore invalid. The layout engine throws out the inner component’s height (which was previously 100%) and makes it an undefined height component (which then gives it an explicit automatic height based on the sizes of its children).

Hope this helps,