PDA

View Full Version : [DUP] Grid visual regression when using IE7



bseddon
22 Apr 2013, 8:21 AM
When using IE 7 with ExtJS 4.2 hidden columns cause an extra pixel to be displayed if 'columnLines' == true. See the small screenshot shown in-line.

43284

I've not tested IE 6 but all other browser/ExtJS combinations are OK including IE 8/9. Examples of how it looks in various combinations are shown in the attached screenshots.

Grids in 4.2 no longer use a <th> to define each column. Instead a column is part of a <colgroup>. If a column is hidden the relevant <col> element within the <colgroup> is styled to have a width of zero. However for IE 7 this is not enough. I have found that it is also is necessary to ensure the 'border-right-width' attribute of each <td> associated with a hidden column is zero. You may have better CSS skills than me and/or have more ExtJS knowledge than me so know a better solution.

As this problem cannot be fixed through styling, because there is no class to indicate that a <td> is part of a hidden column, my solution has been to modify ExtJS so that a class is added to each affected <td>. A way to do this is to add the following to the 'renderCell' function:


if (column.hidden)
{
classes[clsInsertPoint++] = Ext.baseCSSPrefix + "colhidden"
}

I added these lines just before the line which reads: 'classes.length = clsInsertPoint;' though any place after the 'classes' array is initialized and before it is used should do.

Before posting I confirmed this issue is not fixed in the Friday night build of 4.2.1 beta.

With this change I'm able to style the <td> to hide the right border when a column is hidden and IE 7 is being used:


.x-ie7 .x-grid-td.x-colhidden {
border-right-width: 0px;
}

slemmon
22 Apr 2013, 9:22 AM
Thanks for the report!
I've included your report on the existing bug report.
For reference:
http://www.sencha.com/forum/showthread.php?258478