Vaadin - Table data not displayed if I use AbsoluteLayout

Question

Currently I'm facing quite weird problem with Vaadin Table. If I use AbsoluteLayout data in table are not shown, but if I use i.e. HorizontalLayout, data are perfectly shown. This works:

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Table;

public class MyComposite extends CustomComponent {


    @AutoGenerated
    private HorizontalLayout mainLayout;
    @AutoGenerated
    private Table table;


    public MyComposite() {
        buildMainLayout();
        setCompositionRoot(mainLayout);
        // TODO add user code here

        table.addContainerProperty("First Name", String.class, null);
        table.addContainerProperty("Last Name", String.class, null);
        table.addContainerProperty("Year", Integer.class, null);

        table.addItem(new Object[] { "Nicolaus", "Copernicus",
                new Integer(1473) }, new Integer(1));
        table.addItem(new Object[] { "Tycho", "Brahe", new Integer(1546) },
                new Integer(2));

    }

    @AutoGenerated
    private HorizontalLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new HorizontalLayout();
        mainLayout.setStyleName("blue");
        mainLayout.setImmediate(false);
        mainLayout.setWidth("100%");
        mainLayout.setHeight("100%");
        mainLayout.setMargin(false);

        // top-level component properties
        setWidth("100.0%");
        setHeight("100.0%");

        // table
        table = new Table();
        table.setImmediate(false);
        table.setWidth("100.0%");
        table.setHeight("100.0%");
        mainLayout.addComponent(table);

        return mainLayout;
    }

}

But this doesn't:

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Table;

public class MyComposite extends CustomComponent {


    @AutoGenerated
    private AbsoluteLayout mainLayout;
    @AutoGenerated
    private Table table;
    public MyComposite() {
        buildMainLayout();
        setCompositionRoot(mainLayout);
        // TODO add user code here

        table.addContainerProperty("First Name", String.class, null);
        table.addContainerProperty("Last Name", String.class, null);
        table.addContainerProperty("Year", Integer.class, null);

        table.addItem(new Object[] { "Nicolaus", "Copernicus",
                new Integer(1473) }, new Integer(1));
        table.addItem(new Object[] { "Tycho", "Brahe", new Integer(1546) },
                new Integer(2));

    }

    @AutoGenerated
    private AbsoluteLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new AbsoluteLayout();
        mainLayout.setStyleName("blue");
        mainLayout.setImmediate(false);
        mainLayout.setWidth("100%");
        mainLayout.setHeight("100%");

        // top-level component properties
        setWidth("100.0%");
        setHeight("100.0%");

        // table
        table = new Table();
        table.setImmediate(false);
        table.setWidth("100.0%");
        table.setHeight("100.0%");
        mainLayout.addComponent(table);

        return mainLayout;
    }

}

Names of columns are shown in both cases. Can someone tell me why this happens? Thanks in advance.

Answer 1

I was able to reproduce your problem. It seems that Vaadin guys described the cause here: Vaadin book

Quote:

A layout that contains components with percentual size must have a defined size!

If a layout has undefined size and a contained component has, say, 100% size, the component will try to fill the space given by the layout, while the layout will shrink to fit the space taken by the component, which is a paradox. This requirement holds for height and width separately. The debug mode allows detecting such invalid cases; see Section 11.3.5, “Inspecting Component Hierarchy”

In case of the AbsoluteLayout, so far the only workaround that I found is to set your table dimensions to some fixed values.

Answer 2

If you open up your Firebug and disable the position:relative on the div with the class v-absolutelayout-margin, it will display the table. According to Firefox Bugzilla and Orbeon this is a bug from Firefox concerning tables, but I also reproduced it on Chrome so I'm not sure of the exact cause.

I guess you could try setting the position as inherit but I do not know what impact it will have on your app

.mytheme .v-absolutelayout-margin {
    position:inherit;
}