TreeGrid columns content overlap when viewed in IE6

[abc_da]

Detailed description of the problem:
Column contents in TreeGrid is not wrapped if it doesn't fit the column width. Instead it overlaps with contents of other columns(see attached screenshots).

GXT version: 2.2.3
GWT version 2.2.0

Appears in web mode. I haven't tested in DevMode
Browser: IE6 SP1
Operating System: WinXP SP3

Sample code:

package com.test.client;

import java.util.Arrays;


import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGrid;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGridCellRenderer;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;


public class TreeGridTest implements EntryPoint {


    public void onModuleLoad() {
        LayoutContainer layoutContainer = new LayoutContainer(new FitLayout());
        layoutContainer.setSize("200px", "200px");
        layoutContainer.setBorders(true);


        TreeGrid<ModelData> treeGrid = createTreeGrid();
        populateStore(treeGrid.getTreeStore());
        layoutContainer.add(treeGrid);


        RootPanel.get().add(layoutContainer);
    }


    private TreeGrid<ModelData> createTreeGrid() {
        final TreeStore<ModelData> store = new TreeStore<ModelData>();


        TreeGrid<ModelData> tree = new TreeGrid<ModelData>(store, getColumnModel());


        tree.getView().setForceFit(true);


        tree.setColumnLines(true);


        tree.setAutoWidth(true);


        return tree;
    }


    private ColumnModel getColumnModel() {


        ColumnConfig display = new ColumnConfig("name", "Name", 100);
        display.setRenderer(new TreeGridCellRenderer<ModelData>());


        ColumnConfig number = new ColumnConfig("number", "Number", 50);


        ColumnConfig version = new ColumnConfig("version", "Version", 50);


        return new ColumnModel(Arrays.asList(display, number, version));
    }


    private void populateStore(TreeStore<ModelData> treeStore) {
        ModelData root = new BaseTreeModel();
        root.set("name", "Very very very long name");
        root.set("number", "32413241");
        root.set("version", "0");


        ModelData child1 = new BaseTreeModel();
        child1.set("name", "Child element 1");
        child1.set("number", "12323423");
        child1.set("version", "1");


        ModelData child2 = new BaseTreeModel();
        child2.set("name", "Child element 2");
        child2.set("number", "5323452345");
        child2.set("version", "0");


        treeStore.add(root, true);
        treeStore.add(root, Arrays.asList(child1, child2), true);
    }
}

ie7.PNGie6.PNG

[abc_da]

Maybe someone could suggest a workaround or something?

[sven]

You can set the overflow to hidden on the this relevant element for now. This will be fixed in one of the upcomming releases and it an already known issue.

[abc_da]

I ended up adding "width:100%; overflow:hidden;" to .x-tree3-el. Seems to work fine for me.

Thanks for your help.

[zlog]

There is also an problem in Chrome(18.0.1025.3 dev). I attached the image.