setSizeFull() in layout for Form causes height: 0px

Vaadin 6 / 7 / 8 Framework UI
1

I was pretty sure it was my mistake, but after a while I gave up and dare to assume it may be a bug.

Here come’s the code (notice the comment)

public class RevisionSelectWindow extends Window {
  private final Table table;
  private BeanItemContainer<Revision> revisionDataSource;
  private final HorizontalLayout buttonLayout;
  private VerticalLayout formLayout;
  private final Form form;

  public RevisionSelectWindow() {
    super( "Select Revision" );
    setWidth( 600, Sizeable.UNITS_PIXELS );
    setHeight( 300, Sizeable.UNITS_PIXELS );
    center();
    getContent().setSizeFull();
    form = new Form( formLayout = new VerticalLayout() );
    form.setSizeFull();


    // This line causes the form layout to collapse (height: 0px)
    formLayout.setSizeFull();


    addComponent( form );

    table = new Table();
    table.setSizeFull();
    table.setSelectable( true );
    table.setContainerDataSource( revisionDataSource = new BeanItemContainer<Revision>( Revision.class ) );
    for ( int i = 1; i <= 5432; i++ ) {
      revisionDataSource.addBean( new Revision( i, "", new Date(), "me", "Some comment " + i ) );
    }
    formLayout.addComponent( table );

    buttonLayout = new HorizontalLayout();
    buttonLayout.addComponent( new Button( "OK" ) );
    buttonLayout.addComponent( new Button( "Cancel" ) );
    form.setFooter( buttonLayout );
  }
}

The target is to have a resizable window with a dynamic sized table on top and two buttons fixed below.
How to achieve that, or why does the formLayout collapse?

2

You seem to be right. Actually everything inside the form with relative height seems to get height: 0px. I tested with a label too. I checked the sizes from chrome inspector. the Form seems to take the whole window, but the fieldset-tag directly inside it, won’t take up 100% height, even if the form itself does. Every component in the form goes into this fieldset. I think this is a bug and the bug is in the .

3

Yes, I can confirm this. Test case is here:

http://uilder.virtuallypreinstalled.com/run/Form_Layout_Bug/

One might ask why to use the Form in the first place, but there might be something else not seen in this code.

4

I created
a ticket

I didn’t know how to make the table with relative height but still having the buttons at the bottom with fixed height. I remembered that the Form and its footer does the thing I want, therefore I tried to use it as a workaround.

Edit:
I just saw, if you resize the window, the table gets visible and behaves like I want (except the button-area is too big).

5

What you are looking for is the expandRatio that tells the layout between which components any extra space should be divided. By default it is divided between all components. If you skip your Form and just use a VerticalLayout as follows you should get what you want:

        public RevisionSelectWindow() {
            super("Select Revision");
            setWidth(600, Sizeable.UNITS_PIXELS);
            setHeight(300, Sizeable.UNITS_PIXELS);
            center();

            VerticalLayout vl = new VerticalLayout();
            vl.setSizeFull();
            setContent(vl);

            table = new Table();
            // [...]

            vl.addComponent(table);

            buttonLayout = new HorizontalLayout();
            // [...]

            vl.addComponent(buttonLayout);

            // Give any extra space to the table to make it fill the window
            vl.setExpandRatio(table, 1);
        }
6

I also tried the expandRatio, but it wasn’t an alternative as I thought I had to set the ratio for both layouts. I never thought about using it only for the table part. That helped, thanks :smiley: