Problem resizing table in formlayout

Vaadin 6 / 7 / 8
1

I have a problem with resizing table that is added as component to FormLayout. Table resizes OK to bigger size, but when window is resized to smaller size, table is not.

Code to repate problem:


public class TestUI extends UI
{

    @Override
    protected void init(VaadinRequest request)
    {
        FormLayout view = new FormLayout();
        view.setWidth("100%");
        
        Table table = new Table();
        table.setCaption("Table");
        table.setWidth("100%");
        
        view.addComponent(table);
        setContent(view);
    }
}

Steps:
-on start table width is OK
-resize to bigger window, table width is OK
-resize to smaller window, table is too big

If Table is added to some different layout, for example VerticalLayout it works.

2

Hi,

confirmed on Vaadin 7.0.1 and definitely seems like a bug to me. Please create a new ticket to the Vaadin trac and attach your test case code.

-tepi

3

Ok, thanx.

Ticket created: http://dev.vaadin.com/ticket/11154

4

I found similar problem for ComboBox. When used in FormLayout it resizes in both ways but when shrinking it is limited to some width (156px), below that width it does not resize anymore.

So for example if i have this code below. Textfield resizes right, but combobx does not resize correctly under some width. If i change both FormLayout to some other layout, for example VerticalLayout, it works.


public class TestUI extends UI
{

    @Override
    protected void init(VaadinRequest request)
    {
        HorizontalLayout mainlayout = new HorizontalLayout();
        mainlayout.setWidth("100%");
        setContent(mainlayout);   
        
        Label filler = new Label("foo");
        filler.setWidth("100px");
        mainlayout.addComponent(filler);

        FormLayout view2 = new FormLayout();
        view2.setWidth("100%");
        mainlayout.addComponent(view2);
        
        TextField text = new TextField();
        text.setCaption("text");
        text.setWidth("100%");        
        view2.addComponent(text);
        
        FormLayout view1 = new FormLayout();
        view1.setWidth("100%");
        mainlayout.addComponent(view1);
        
        ComboBox combo = new ComboBox();
        combo.setCaption("combo");
        combo.setWidth("100%");        
        view1.addComponent(combo);
        
    }
}
5

I have same problem with CssLayout. When one CssLayout is nested inside secound CssLayout, table does not resize when window is resized.

Examples
One CssLayout, everything works correct.


public class TestView extends VerticalLayout {

    public TestView() {
        IndexedContainer contactContainer = new IndexedContainer();
        contactContainer.addContainerProperty("A", String.class, "");
        contactContainer.addContainerProperty("B", String.class, "");

        Table table1 = new Table();
        table1.setColumnCollapsingAllowed(true);
        table1.setContainerDataSource(contactContainer);
        table1.setSizeFull();

        CssLayout cssLayout1 = new CssLayout();
        cssLayout1.addComponent(table1);
        
        addComponent(cssLayout1);
    }
}

Two CssLayouts, problem occurs


public class TestView extends VerticalLayout {

    public TestView() {
        IndexedContainer contactContainer = new IndexedContainer();
        contactContainer.addContainerProperty("A", String.class, "");
        contactContainer.addContainerProperty("B", String.class, "");

        Table table1 = new Table();
        table1.setColumnCollapsingAllowed(true);
        table1.setContainerDataSource(contactContainer);
        table1.setSizeFull();

        CssLayout cssLayout1 = new CssLayout();
        cssLayout1.addComponent(table1);

        CssLayout cssLayout2 = new CssLayout();
        cssLayout2.addComponent(cssLayout1);
        
        addComponent(cssLayout2);
    }
}

I have to use CssLayouts to solve performance issues under IE8 (
Optimizing Sluggish UI
).
Right now this is blocker for us.
Tested on Vaadin 7.0.5

6

I also getting same issue on CustomLayout:
When enlarge page size, the Table will auto expand to correct size, but when reduce the page width the table stay on the same size, which is out side of page view.