Alignment of buttons in a horizontal layout

I’ve created a horizontal layout and inserted 3 buttons. I would like them to be centered on the page, with a small amount of white space in between them - something like:

                                              | button1 |        | button 2 |          | button 3 |

Instead, when I add the layout to my page, I get this:

| button 1| | button 2 | | button 3 |

I tried playing with the expandRatio, to no avail - most likely I still don’t understand what that is supposed to do.

Can someone give me a hint on how to lay out these buttons?

And a second question - if I create 2 Horizontal layouts with 3 buttons each, when I drop them into the page, I get about 6 inches of white space between the 2 rows of buttons - how can I force them together (they are being dropped into a VerticalLayout object which had its expandRatio set to 1.0 to make it fill up the middle of my page, but I would like the 2 rows of buttons to be grouped together.

I have not figured out how to manage layouts yet - any pointers would be appreciated - documentation, code examples etc… I’m not used to manually laying out a UI with code - I’ve spent a long time using the Netbeans visual builder, so I’m rather new at doing this…

thanks in advance,


have you tried setwidth on the 1st button? setHeight on your 2nd question on the horizontal layout? Might want to also look at gridlayout,

the vaadin is really the best resource, but it does require some trial and error. Sometimes you need to tweak certain things via css after the fact. As you start using vaadin you end up figuring out when you need to jump to css.

Also setsizeundefined() api comes in handy in certain situations. Spend sometime learning what it does to see if it relates to what you are doing.

Hope it helps. If you are still stuck maybe you can post simple source code.


You probably have set the width of the HorizontalLayout to 100%. That means that the excess space left over from the buttons is spread equally among the component slots, creating that empty space after each button. This excess space can be controlled with the expand ratios (the ratio meaning how much of that space should be allocated to that slot – setting only one will set the others to zero, giving all extra space to the one slot).

In your case, I would set the width of the HorizontalLayout to undefined and center it using the parent layout and the setComponentAlignment method.

Thanks for the suggestions - I will look into both of them… Much obliged,