Table bug: header shifts and disappear in case of large column count

Vaadin 6 / 7 / 8 Framework UI
1

Here is a possible bug in Table.
Affected version: all 6.2.x and 6.3.0
On all browsers (tested on IE7, chrome, safari, firefox)

The source code explains itself.
Note: if you use longer text in column header, the problem begins with smaller column count.


public class TabletestApplication extends Application
{
    //COLS = 200; still ok
    //COLS = 210; header width begins shifting
    //COLS = 230; header text disappears
    static final int COLS = 230;
    
    @Override
    public void init()
    {
        Window mainWindow = new Window("Tabletest Application");
        
        final Table t = new Table();
        t.setSizeFull();
        t.addContainerProperty("name", String.class, "NA");
        
        for(Integer i = 0; i < COLS; i++)
        {
            t.addContainerProperty(i, Integer.class, Integer.valueOf(0));
        }
        t.addItem("1").getItemProperty("name").setValue("Ares");
        t.addItem("2").getItemProperty("name").setValue("Bob");
        t.addItem("3").getItemProperty("name").setValue("Coral");
        t.addItem("4").getItemProperty("name").setValue("David");
        t.addItem("5").getItemProperty("name").setValue("Emma");

        mainWindow.addComponent(t);
        setMainWindow(mainWindow);
    }
}
2

I’m encountering the same problem. Any workaround for fixes??

3

My best bet is that you’ve hit an artificial upper limit that we’ve managed to code into the client side Table widget.

The table column headers reside inside a DIV element that has a fixed 9000 pixel width. Once the header’s width exceeds that amount, all of the header captions drop down one “line”, thus making them invisible.

The problem should be fixed here:
VScrollTable.java, line 1396 (static field WRAPPER_WIDTH)
.

This is very much a bug in my opinion, so please, if you have the time, create a new ticket in our Trac. Thanks!

Update: and as for a workaround, you could try using CSS:

.v-table-header > div {
    width: 99999px !important;
}

That should work for all other supported browsers except IE6, but unfortunately I have no good solution for IE6 at the moment.

4

Created ticket
#5022
 about this issue.

5

The CSS workaround works for now. Thanks!