Tightening a Table by removing some empty space

Hi,

Is it somehow possible to tighten a Table by removing the extra width that is generated to the right in cells? I suffer from having components that don’ t fit the table width, but still lots of empty space appears horizontally in cells.

My test code with TK 5.3.0rc6 using OSX/FF3 and Safari.


import java.util.Random;

import com.itmill.toolkit.Application;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.Table;
import com.itmill.toolkit.ui.VerticalLayout;
import com.itmill.toolkit.ui.Window;

public class Test extends Application {

    Window main;

    @Override
    public void init() {
        main = new Window("Quick test");

        setMainWindow(main);

        setTheme("quicktest");

        VerticalLayout hl = new VerticalLayout();
        hl.setWidth("400px");
        main.setLayout(hl);

        Table t = new Table();
        t.setWidth("100%");
        t.setSortDisabled(true);

        t.addContainerProperty("Prop 1", VerticalLayout.class, "");
        t.addContainerProperty("Prop 2", String.class, "");
        t.addContainerProperty("Prop 3", String.class, "");
        t.addContainerProperty("Prop 4", String.class, "");
        t.addContainerProperty("Prop 5", Button.class, "");

        t.setPageLength(3);

        for (int i = 0; i < 10; i++) {
            VerticalLayout vl = new VerticalLayout();
            Button b = new Button("String 1 2 3");
            b.setStyleName(Button.STYLE_LINK);
            vl.addComponent(b);
            t.addItem(new Object[] { vl, "String 2", "String 3", "String 4",
                    new Button("String 5") }, new Integer(new Random()
                    .nextInt()));
        }

        hl.addComponent(t);

    }
}

Hi!

Column margin in currently defined in client side component, so you cannot change it with CSS only. This will hopefully change in near future.

Overriding the values in you own widget set should be fairly simple, but haven’t tried it.

cheers,
matti

Yeah, the margin is no problem with CSS, but it’s still just 5px. Even if I put that to 0, the columns are still rendered as quite wide with some extra space. I guess this has something to do with the sorting icon indicator in the header, which requires some room. I would though be practical if even this could be minimized (e.g. when disabling sorting or marking that no icon should appear when you sort a column).