HorizontalLayout with expansion Ratio does not render correctly

I have a layout consisting of multiple lines (see screenshot):

  • a Label as the header
  • some FormLayouts horizontally layouted (don’t blame me, the project manager wants it like this)
  • some buttons horizontally layouted
  • and a grid

What I want: The uppeer elements (header Label, Form, Buttons) should have a fixed size (its default size) while the grid fills the rest of the screen size.

What I did: All of the upper elements have an unspecified heihgt, the Grid has a height of “100%” and a expansion ratio of 1 while the other elements dont have an expansion ratio set

class … extends VerticalLayout


private void generateLayout() {
     private void generateLayout() {



  HorizontalLayout buttonLayout = new HorizontalLayout(saveButton, deleteButton, cancelButton, addButton);
  buttonLayout.setWidth(100, Unit.PERCENTAGE);

  // create a big spacer after the cancel button to distinguish between the
  // form actions (save, delete, cancel) and the tabel action "add"
  buttonLayout.setExpandRatio(cancelButton, 1);

  setExpandRatio(grid, 1);

[/code]What I get: The upper elements looks normal while the Grid is some pixels (around 100) too long. The lower part of the grid is not visible


It looks correct, at least with a quick glance, although some wrong assumption about default heights could cause trouble. I’m assuming that you set the layout as the UI’s content; that’s not visible in your code. Also the sizing of your editor form is not visible.

You can check for some basic layout sizing errors in the debug window, there’s a button for that.