How to insert grid lines?
Alex once answered
".aw-grid-cell {border-right: 1px solid red}"
to a question "How do I add vertical cell lines?".
I do not understand where this code should be placed?
Can someone enlighten me?
I am trying to insert horizontal and vertical lines on an AW grid.
Thanks.
Russell
October 13,
More searching in this forum shows one way to achieve horizontal and vertical grid lines:
<?php .....
>?
<html>
<head>
<!-- include AW stylesheet and script -->
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
</head>
<body>
<style>
// place grid lines in the grid style
.aw-grid-cell {border-left: 2px solid threedlightshadow;}
.aw-alternate-even {background: #fff;}
.aw-alternate-odd {background: #eee;}
</style>
<script>
.......
But these insertions in the <style> section produce a grid whose header (1st row) separators are shorter than the other row seaarators giving the appearance that the header cell widths are shorted than the data cell widths.
By removing the code .aw-grid-cell....
above the header cell widths exactly match the data cell widths.
Could it be the cell width arithmetic is faulty when this line is present. Perhaps the widts are not taking into account the 2px line widths?
Russell Belding
October 14,
So the comment above should be turned into a bug report.
By increasing the vertical cell line width to say 25px it "looks" like the vertcal line is not placed in th eheader cells. Consequently the rows below the header line have cells whose widths ar elonger than th header cell widths. This makes grids using vertical lines misaligned between the header row and the rows below. (I am using trial version 2.0.2) This applies to standard and extended grids.
Russell Belding
October 14,
Russel,
check if your pages have DOCTYPE declaration. It looks like your page is rendered in standards-compliant mode which switches the browser into 'content-box' size calculation mode. The grid does not calculate the sizes of the cells and relies on CSS rules for layout, so if you change the styles you have to make sure that the size of the elements is not affected. In 'content-box' mode the CSS rules apply the width and height to the element content, and not to the element itself, so when you add the border it increases the element width. To compensate for this you should decrease the element padding to the same amount. The default padding for the cells in 'content-box' mode is 4px left, 4px right and 4px bottom, so the correct rules for the cell border should look like -
.aw-grid-cell {
border-right: 2px solid threedlightshadow;
padding-right: 2px!important;
}
Normally I would not recommend using 'standards-compliant' DOCTYPEs but you probably don't have a choice because Joomla template requires it.
Look also in /examples/quickref/grid.htm for samples of grid formatting code.
Alex (ActiveWidgets)
October 14,
Just another word of caution - IE 5.5 always works in 'border-box' mode and Safari 2.0 always uses 'content-box' regardless of the DOCTYPE, so it is better to use
.aw-strict selector. AW inserts aw-strict class to the <html> element when the document is actually rendered in 'content-box' mode (strict DOCTYPEs).
#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
.aw-strict #myGrid .aw-grid-cell {padding-right: 3px;}
.aw-strict #myGrid .aw-grid-row {padding-bottom: 3px;}
Alex (ActiveWidgets)
October 14,
Thank you Alex for your explanation and solution. I appreciate you patient discussion for a newbie to web apps.
Russell Belding
October 14,