ListGrid Header Columns Do Not Line up Correctly with Data Columns on FireFox/Chrome

[chatchawee.tangsayan]

Please test the given code as follow:

1. Use Firefox or Chrome
2. Make sure that the browser is wide enough, so the first column is expanded to make the grid fits browser's width.
3. Enter "t" in the first column's filter box.
4. Press "enter" key to apply the filter. The grid still looks great at this time (image 1).
5. Press "enter" key again. This time, the header columns don't line up properly with data columns and filter columns. (image 2)

I also find a few other situations that trigger this issue. Let me know if you would like to have that test cases also.

Thanks,

Test Environments:
GWT 2.4.0
Smart GWT 3.0p (http://www.smartclient.com/builds/Sm...GPL/2012-01-17)
Test against compiled javascript files on the following browsers
- Windows Internet Explorer 9.0.8112.16421, Update Versions 9.0.4
- Firefox 9.0.1
- Google Chrome 16.0.912.75 m
Windows 7 Ultimate Service Pack 1

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.DataClass;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.VLayout;


public class ListGridLineUpTester implements EntryPoint {
    
    public final static int COLUMN_COUNT = 4;
    public final static int ROW_COUNT = 10;

    @Override
    public void onModuleLoad() {
        VLayout layout = new VLayout();
        layout.setHeight100();
        layout.setWidth100();

        ListGrid listGrid = new ListGrid();  
        listGrid.setWidth100();
        listGrid.setHeight100();
        listGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
        listGrid.setAutoFitFieldWidths(true);
        listGrid.setShowFilterEditor(true);
        listGrid.setDataSource(new DemoDS());
        listGrid.setAutoFetchData(true);

        layout.addMember(listGrid);
        layout.draw();  
    }
    
    public static class DemoDS extends DataSource {

        public DemoDS() {  

            setClientOnly(true);

            DataSourceTextField[] fieldArray = new DataSourceTextField[COLUMN_COUNT];
            for (int i=0; i<COLUMN_COUNT; i++) {
                fieldArray[i] = new DataSourceTextField("COLUMN_"+i);
            }
            setFields(fieldArray);

            DataClass[] dataArray = new DataClass[ROW_COUNT];
            for (int i=0; i<ROW_COUNT; i++) {
                DataClass data = new DataClass();
                for (int j=0; j<COLUMN_COUNT; j++) {
                    if ((j) % 2 == 0) {
                        data.setAttribute("COLUMN_"+j, "The even columns have much longer text.");
                    } else {
                        data.setAttribute("COLUMN_"+j, "short.");
                    }
                }
                dataArray[i] = data;
            }
            setTestData(dataArray);

        }  
    }  
}

[Isomorphic]

A quick update to let you know we're looking at this

[Vittorio Paternostro]

Was this fixed? I get the same misalignment on Chrome

Was this bug fixed? I get the same misalignment on Chrome

thanks,
Vittorio