Equal height boxes inside GridLayout

Hi all,

I need to have a grid layout (or equivalent) that contains “info boxes” with some textual data (key-value pairs to be more specific). The boxes have a border and a caption. Visually, these boxes need to be the same height. E.g. if one of the boxes on a given row has more content than the others, the other boxes need to increase their height to the same size. The height of the largest box will be unknow (cannot set pixel height to the row).

Making the boxes same height (so that both their top and bottom border align) is the problem I’m trying to solve.

Here’s one way how to do it with HTML + CSS: http://jsfiddle.net/kbjorklid/h1fvsk7h/1/

The only solution I’ve come up so far is to execute JavaScript snippet that will search for the tallest box and set its height to all the other boxes. However, the boxes are restored to their previous sizes on repaint (for instance, when swithcing tabs in a TabSheet), and I cannot figure out how to make the JS snippet execute on repaint.

Any help will be greatly appreciated.

Perhaps a CSSLayout would permit you to do this in a way similar to your example.