Table columns too wide, doesn't align

[connysvensson]

I have a table inside a content panel with a top toolbar and a bottom paging toolbar. The table is too wide and spans outside the content panel container. This is in IE standalone and hosted mode. It looks correct in FF. I have attached a screenshot and the code below shows how the table is setup.

I can get it to look ok if I set an explicit width (900). I've tried with setAutoWidth(true). The result I want is for it to automatically fill the width, the same way the toolbars are doing. Is see it as a big problem if you have to specify a fixed width and height (can I get the height to auto size depending on content?) for the UI to align correctly. In the end it's all rendered as a DOM tree and these things are pretty straightforward in plain old HTML.

The code below shows how my class which is exending the ContentPanel class is setup.

final protected ToolBar toolBar = new ToolBar();
final PagingToolBar pagingBar = new PagingToolBar(50);
final protected Table table = new Table();

@Override
protected void onRender(Element parent, int index) {
        super.onRender(parent, index);

        setHeaderVisible(false);
        setBorders(false);
        setLayout(new FillLayout());

        table.setSelectionModel(new RowSelectionModel(SelectionMode.SINGLE));
        table.setBorders(false);
        table.setHeight(300);

        List<TableColumn> columns = new ArrayList<TableColumn>();
        columns.add(new TableColumn(EmployeeProperties.FIRSTNAME, res.firstNameLbl(), .2f));
        columns.add(new TableColumn(EmployeeProperties.LASTNAME, res.lastNameLbl(), .2f));       
        columns.add(new TableColumn(EmployeeProperties.USERID, res.userIdLbl(), .1f));
        columns.add(new TableColumn(EmployeeProperties.SAPID, res.sapIdLbl(), .1f));
        columns.add(new TableColumn(EmployeeProperties.POSITION, res.positionLbl(), .2f));
        columns.add(new TableColumn(EmployeeProperties.WORKPERCENTAGE, res.workPercentageLbl(), .1f));
        TableColumn col = new TableColumn(EmployeeProperties.STARTDATE, res.startDateLbl(), .1f);
        col.setRenderer(new DateTimeCellRenderer("y-MM-dd"));
        columns.add(col);
        table.setColumnModel(new TableColumnModel(columns));

        editBtn = new TextToolItem(globalResources.editBtn(), "icon-add");
        editBtn.setEnabled(false);        
        toolBar.add(editBtn);
        toolBar.add(new SeparatorToolItem());
        
        add(table);

        setTopComponent(toolBar);
        setBottomComponent(pagingBar);

        layout();
}

[gslender]

where is the table being added to the contentpanel?

[connysvensson]

Sorry, I cut out the part where I added the edit button to the toolbar and accidentally removed the add(table) part as well.

[gslender]

connysvensson,
can't see anything initially wrong - provide a complete code snippet that compiles without needing special classes from you etc and I can take a look - otherwise not sure what is intially wrong...

[gslender]

oh, a thought - take out the setHeight() and set the content panel size(500,500); that should fix it...

[connysvensson]

Thanks!
That did it, but I just set the height not the width (I want it to automatically fill the available width). So I simply changed table.setHeight(300) to setHeight(400). So clearly setting the height of a child component also affects the width for some reason, or dou you have a better explanation why setting the height of the container instead of the child fixed the problem?

[gslender]

current Table and Tree widgets are quick hacks from the old myGWT and are not as nicely behaved as other widgets... (i think)

the developer (Darrell) is going to redo the Table into a Grid (Ext term) and this should get things working better

so currently the table must either be fully sized (by height and width) or be fully sized by its parent (which is what the setheight on contentpanel did)

make sense?