Complex Layout of admin application

Dear Sirs,

we have a custom GUI builder that should generate Vaadin code. My problem is that the desing of such panel is Grid based, with fixed grid count and size.
You can see such designed GUI in the attachment.

I need a vaadin layout like GridLaout that will have a some grid like 60/80, but all cells should have same size. I expect to set the components in the grid cells, without defining any size of them.
In ideal case I would set a minimum size of the panel (so it can be readeable), but this is not a must, but in case the screen size is bigger, then the grid cells should use more space (again all the same) and just adapt.

I managed to generate panel looking as expected but only with AbsolutLayout (position and size of components calculated on generated time).

I would like to use GridLayout, but until now I fail even to make a prototype by my hand that looks as expected.

Please give me some Ideas or examples.
I would like to use Vaadin 7.

thanks in advance

While I think it is possible to use a grid layout like this, I am afraid that it would end up being extremely heavy to render.
If what you want to do is be able to set component saying “this button starts as (2;3) and ends up at (6;5)” then I think you should look like at absolute layout and how the vaadin team used it in the visual editor.

Indeed, technically it should be possible to use GridLayout, but it is not really designed for this many rows and columns and that much spanning. Extensive use of column and row spanning complicates the calculations the layout performs, as would separate column and row expand ratios.

Your situation actually looks like a customized layout might be the best option - matching your specifications, clean and fast to render . However, implementing a layout on the client side is not an easy task. It might be possible to simplify VGridLayout for your use, removing most of the layout related code such as explicit colExpandRatio, rowExpandRatio etc. support and support for undefined width components controlling cell sizes. Then use 100% size for each child component.

Other alternatives include composing the layout from parts that might be e.g. CssLayouts, although this might get heavy to render for layouts as complex as yours.

Dear Mr. Sara and Clerc,

thank you for your fast responce.
I don’t feel so confident to implement my own layout yet.
I did some small Vaadin changes (like making VUpload to use native button ), but a new layout is something different.

Is it possible to order such layout on vaadin team? For me this is a more possible solution.

Please feel free to contact me directly on my email if this is possible at all.

Until then, I will stick with absolut layout, which do most of the work so far.

Best regards.

Georgi Kirtchev

Dear Sirs,

Is it possible before creating the panel to take the possible window size in the browser?
I mean, if I can get this size on the backend, I could calculate my size on the fly for every component and again use AbsolutLayout but adopted to the current brawser size.

this could be some kind of layout but calculated on the server. Of course everything depends on the possibility to take the size of the brawser window.

best regards

Georgi Kirtchev

You can contact the sales team via
if you would like Vaadin Ltd to implement this. You can add a link to this forum thread to your request so that you don’t need to go through all the explanations again.

It is only possible to get information to the server about the window size after the window has been rendered once, so you cannot use that information in the initial rendering but would need to postpone the calculations somehow - there are a few alternatives for doing this, but some are non-trivial.

Getting the size of the layout is more complicated, but if the layout fills the window, it might be enough to calculate the layout size from the window (content) size.