Header and Cell data alignment issue

I am using the current trial version of the grid version 2.0.2 and the cell and Header are not align properly. Am I doing something wrong?

My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>body {font: 12px Tahoma}</style>

<link href="runtime/styles/xp/aw.css" rel="stylesheet" type="text/css">

<script src="runtime/lib/aw.js"></script>


<style>
#myGrid {height: 400px; width: 600px;}
#myGrid .aw-row-selector {text-align: center}
#myGrid .aw-column-0 {width: 80px;}
#myGrid .aw-column-1 {width: 80px;}
#myGrid .aw-column-2 {width: 80px;}
#myGrid .aw-column-3 {width: 80px;}
#myGrid .aw-column-4 {width: 80px;}
#myGrid .aw-column-5 {width: 80px;}
#myGrid .aw-column-6 {width: 80px;}
#myGrid .aw-column-7 {width: 80px;}
#myGrid .aw-column-8 {width: 80px;}
#myGrid .aw-column-9 {width: 80px;}
#myGrid .aw-column-10 {width: 80px;}
#myGrid .aw-column-11 {width: 80px;}
#myGrid .aw-column-12 {width: 80px;}
#myGrid .aw-column-13 {width: 80px;}
#myGrid .aw-column-14 {width: 80px;}
#myGrid .aw-column-15 {width: 80px;}
#myGrid .aw-column-16 {width: 80px;}
#myGrid .aw-column-17 {width: 80px;}
#myGrid .aw-column-18 {width: 80px;}
#myGrid .aw-column-19 {width: 80px;}
#myGrid .aw-column-20 {width: 80px;}
#myGrid .aw-column-21 {width: 80px;}
#myGrid .aw-column-22 {width: 80px;}
#myGrid .aw-column-23 {width: 80px;}
#myGrid .aw-column-24 {width: 80px;}
#myGrid .aw-column-25 {width: 80px;}
#myGrid .aw-column-26 {width: 80px;}
#myGrid .aw-column-27 {width: 80px;}
#myGrid .aw-column-28 {width: 80px;}
#myGrid .aw-column-29 {width: 80px;}
#myGrid .aw-column-30 {width: 80px;}

#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>


<script>

// create grid control
var grid = new AW.UI.Grid;
grid.setId("myGrid");
function test(){
PageMethods.GetTSData(OnGetTSDataComplete);
}
//retObj.Header:string array,retObj.Detail:multidimensional array
function OnGetTSDataComplete(retObj){
loadgrid(retObj.Header,retObj.Detail)
}
function loadgrid(Header,Detail){
// set grid text
grid.setHeaderText(Header);
grid.setCellText(Detail);

// set number of columns/rows
grid.setColumnCount(Header.length);
grid.setRowCount(Detail.length);

// replace the placeholder tag with the grid html
grid.refresh();
}
</script>

</head>
<body onload="test()">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
</asp:ScriptManager>
<input id="Button1" type="button" value="refresh" onclick="test(2)" /><br>
<span id="myGrid"></span>
</form>
</body>
</html>

Xay Moua

May 17,

I found the problem.

It was this css line:

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

I remove it and it aligned correctly but I still need it because it provides the column separation. What I'm trying to do now is add a pixel to the column header? Anyone knows the equivalent of the above css for the header cell?

Xay Moua

May 17,

If the page contains standards-compliant doctype the browser switches into the box model where the CSS width/height is applied to the element content and the padding+border is added on top of that ('content-box' model). When you are adding border to the grid cells you should reduce the padding in order to keep the total size the same. The default left/right padding is 4px, so when adding 1px right border you should set the right padding to 3px -

#myGrid .aw-grid-cell {
border-right: 1px solid threedlightshadow;
padding-right: 3px;
}

Alex (ActiveWidgets)

May 17,

Thanks Alex,

That worked perfectly.

Xay Moua

May 17,

I have the same problem.

I added this: if I take it out they are aligned, if I leave it in, they are not. The father to the right the more the columns are off.

{border-right: 1px solid threedlightshadow;
padding-right: 3px;}

any suggestions?, Thanks

here is the whole css
.aw-alternate-even {background: #fff;}
.aw-alternate-odd {background: #eee;}
.aw-grid-row {border-bottom: 1px dashed #ccc; }
.aw-grid-cell {border-right: 1px solid threeddarkshadow; padding-right: 3px;}

#gridData .aw-mouseover-row {background: #FFFF99}
#gridData .aw-column-0 {width: 30px; text-align: right}
#gridData .aw-alternate-even .aw-column-0 {background: #fff;}
#gridData .aw-alternate-odd .aw-column-0 {background:#CCCCCC}
#gridData .aw-alternate-even .aw-column-1 {background: #fff;}
#gridData .aw-alternate-odd .aw-column-1 {background:#CCCCCC}
#gridData .aw-alternate-even .aw-column-2 {background: #fff;}
#gridData .aw-alternate-odd .aw-column-2 {background:#CCCCCC}
#gridData .aw-rows-selected {color:#990000; background: #FFFFCC}

ed arthur - ed@edarthur.com

December 4,

You may need more specific selector, i.e.

#gridData .aw-grid-cell {
border-right: 1px solid threeddarkshadow;
padding-right: 3px;
}

otherwise padding-right rule is not applied (does not have sufficient priority to override the default).

Alex (ActiveWidgets)

December 4,

It works!

Thanks,

ed arthur - ed@edarthur.com

December 4,

This topic is archived.

Header and Cell data alignment issue

See also:

Search

New Data Grid

Version 2