Grid header borders are printed a second time in the wrong place.

When I print my grid (see below for example) with IE9, a "ghost image" of the header is produced, that is, the borders of the header are printed a second time to the right of the table.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Print table</title>
<style>
#myGrid {width:700px}
#myGrid .aw-column-0 {width: 150px; }
#myGrid .aw-column-1 {width: 150px; }
#myGrid .aw-column-2 {width: 100px; }
#myGrid .aw-column-3 {width: 100px; }
#myGrid .aw-column-4 {width: 100px;}
#myGrid .aw-column-5 {width: 60px; }
</style>
<link href="aw.css" rel="stylesheet" type="text/css">
<script src="aw.js"></script>
</head>
<body>

<script type="text/javascript">
var cellData = [["Fritz Muster","Baarerstrasse 25","6300 Zug","fritz@muster.ch","CHE-533.105.841","Aktiv"],
["Petra Muster","Freienhofgasse 21","3600 Thun","petra@muster.ch","CHE-197.193.934","Aktiv"],
["Hans Dampf","Untere Rebgasse 8","4058 Basel","hans@dampf.ch","CHE-817.582.013","Aktiv"],
["Fritz am Bach","Stockerstrasse 41","8002 Zürich","fritz@bach.ch","CHE-751.113.846","Aktiv"],
["Annebäbeli Fuess","Marktgasse 66","3027 Bern","","","Aktiv"]];
var headerText = ["Name","Strasse / Nr.","PLZ / Ort","E-Mail","UID","Status"];

var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setCellData(cellData);
obj.setHeaderText(headerText);
obj.setRowCount(5);
obj.setColumnCount(6);
document.write(obj);
</script>

</body></html>

Marcel Zumstein

March 5,

Cannot reproduce this. Do you see this in print preview (or on paper only)?

Alex (ActiveWidgets)

March 17,

It happens only on paper (or with a PDF printer), not in preview mode.
Did you use the exact example above, in standard mode? It seems to happen when the sum of the column widths exceed the grid width. Although in this case, the sum should actually be smaller, but IE9 standard mode doesn't set the widths correctly.

Marcel Zumstein

March 18,

In standard mode you should reduce the column widths by 4px when you specify them via css.

Alex (ActiveWidgets)

March 18,

I can reproduce the issue with XPS Document Writer driver. Looks like a weird IE9 bug.

Here is the fix/workaround -

@media print {
    .aw-ms9 .aw-grid-header .aw-item-box {
        display: inline-block;
        position: static;
        width: 100%;
    }
}

Add this at the end of aw.css or somewhere in your stylesheet.

Alex (ActiveWidgets)

March 18,

The lines are now gone for most tables. For some strange reason, they remain in those tables where the sum of the column width exactliy matches the table with. I can't reproduce it with the stripped-down example, so I blame it on the quriky CSS-hacks in our application. Nevertheless, I was able to solve it with the following CSS:

.aw-ms9 .aw-column-space .aw-item-box {
border: none;
}

Marcel Zumstein

March 19,

The Grid still doesn't print properly. When I add borders for the cells:

.aw-grid-cell {
border: 1px solid threedlightshadow;
}

and increase the number of rows until a vertical scroll bar appears, I get extra lines outside the grid at the bottom.

Marcel Zumstein

March 31,

ok, here is the fix for the cell borders -

@media print {

    .aw-ms9 .aw-grid-cell {
        display: inline-block!important;
        position: static!important;
        float: none!important;
    }

    .aw-ms9 .aw-grid-header .aw-item-box {
        display: inline-block;
        position: static;
        width: 100%;
    }
}

Alex (ActiveWidgets)

April 8,

Now the print looks fine, thanks a lot!

Marcel Zumstein

April 8,

This topic is archived.

Grid header borders are printed a second time in the wrong place.

See also:

Search

New Data Grid

Version 2