DataGrid: Column widths to small with Chrome

[manklu]

Chrome (all WebKit? based browsers?) has two problems with grids:

1. With 'table-layout:fixed; width: 0;', the table cells are in border box mode, and as result is the content area of the cell to small.

The fix for this is to remove the width from the table.

2. After the fix for the first problem, the table cell cannot be smaller than the content.

To fix this, an extra div is needed for the clipping.

As an example, compare the layout of e.g. dojox/grid/tests/enhanced/test_enhanced_grid_pagination.html with other browsers.

[manklu]

The patch contains all needed changes I know. Tested with Chrome 11.0.696.60

[evan]

Hi manklu,

I don't quite understand this issue, can you post a test case or snapshot?

Thanks!

[manklu]

Open the test dojox/grid/tests/enhanced/test_enhanced_grid_pagination.html with Chrome and compare the layout with FF or IE8. You will notice that all columns are smaller with Chrome.

[Andrew Muraco]

I came across this issue and fixed it in a similar way. I also noticed that Chrome(webkit) does different width computation between th and td's, It will add border width to the css width of a th, where as a td will total the css width including the border.

I ended up putting a div in each column and putting the border on the div.

+1

[bill]

Moving apparently forgotten ticket to 1.8.

[Evan]

Seems column width is actually larger in chrome vs ff in the latest version, and the font size etc.are also different even with the same test case. Making them look exactly the same would require significant efforts.

Thanks for manklu's patch, but adding an extra div in cell might not be an ideal solution due to the extra dom burden on rendering and also risky to break some of the existing Grid features on cell dom accessing.