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

[code]
class … extends VerticalLayout

//...

private void generateLayout() {
     private void generateLayout() {
  setSpacing(true);
  setMargin(true);

  setSizeFull();

  headerLabel.setStyleName(ValoTheme.LABEL_H1);
  addComponent(headerLabel);

  editorForm.setSpacing(true);
  addComponent(this.editorForm);
  HorizontalLayout buttonLayout = new HorizontalLayout(saveButton, deleteButton, cancelButton, addButton);
  buttonLayout.setWidth(100, Unit.PERCENTAGE);
  buttonLayout.setSpacing(true);

  // 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);
  addComponent(buttonLayout);

  addComponent(grid);
  setExpandRatio(grid, 1);
  grid.setSizeFull();

}
[/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

18525.png

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.