100% Width Inside of DIV
I am running the following script and I have one issue:
While the width/height of the grid match the width/height of the parent DIV, the grid appears larger than the div block (the grid is clipped because the overflow is set to hidden). Tests have shown the width is greater by 8px and the height is greater by 4px. What further complicates this issue is a requirement to make the width 100%. Tests have shown with this setting, the overlap still occurs. Any ideas on what is causing this issue and how it can be corrected?
<!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" xml:lang="en" lang="en">
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style>body {font: 12px Tahoma}</style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
<!-- grid format -->
<style>
#myGrid .aw-row-selector {text-align: center}
#myGrid .aw-column-0 {width: 80px;}
#myGrid .aw-column-1 {width: 200px;}
#myGrid .aw-column-2 {text-align: right;}
#myGrid .aw-column-3 {text-align: right;}
#myGrid .aw-column-4 {text-align: right;}
#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<!--- set location of grid --->
<div id="myGridContainer" style="position: relative; width: 600px; height: 200px; overflow: hidden;">
<div id="myGrid"></div>
<div id="myGridCover" style="position: absolute; display: block; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #00FF33; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);"> </div>
</div>
<script>
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setStyle('width', '592px');
obj.setStyle('height', '196px');
obj.setStyle('position', 'relative');
// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
obj.setCellFormat([str, str, num, num, num]);
// provide cells and headers text
obj.setCellText(myData);
obj.setHeaderText(myColumns);
// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(5);
// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
// set headers width/height
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
// set row selection
obj.setSelectionMode("single-row");
// set click action handler
obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};
// write grid html to the page
obj.refresh();
</script>
</body>
</html>While the width/height of the grid match the width/height of the parent DIV, the grid appears larger than the div block (the grid is clipped because the overflow is set to hidden). Tests have shown the width is greater by 8px and the height is greater by 4px. What further complicates this issue is a requirement to make the width 100%. Tests have shown with this setting, the overlap still occurs. Any ideas on what is causing this issue and how it can be corrected?
C. Bustamante
March 28,