GWT: Flextable having fixed column size - css

Question

I need a FlexTable in GWT where I can add items at run time. The FlexTable is inside a ScrollPanel, so that when horizontal content exceeds display area a scroll bar appears.
The problem is when there are 2-3 columns they are spaced widely but as column count increases, the cell takes the minimum required area of 100px.
I need to ensure that Cell always takes 100px only. I have been doing following but no success.
myflextable.getCellFormatter().setWidth(0, col, "100px");

Answer 1

Please try with getFlexCellFormatter().setWidth() method.
Please check also that have you given flextable width to 100%.

Answer 2

The problem may be that the flextable is set to be too wide initially. It will fill the scrollpanel by default, and then as a result the columns will stretch to their maximum width.
You should set the width of the flextable explicitly in the beginning, and it will automatically resize correctly when more columns are added at run time.
Here is an example for when you have initially one row and two 100px columns:
ft = new FlexTable();
ft.addStyleName("flextable");
ft.setWidth("200px");
for (int x = 0; x < 2; x++) {
ft.setText(x, 0, "cell");
ft.getCellFormatter().addStyleName(x, 0, "testcell");
}
scrollpanel.add(ft);
and your css should say this:
.flextable {
table-layout: fixed;
}
.testcell {
width : 100px;
}
Note that the flextable is initially set to 200px width, as we start with two columns.
In the CSS file, the table-layout attribute must be set otherwise the columns will get smaller than 100px as you add more (until the cells reach their minimum width, defined by their content).
Also, remember to add the stylename "testcell" to any new cells that you add at runtime.