Grid.Extended and css left/right top/bottum

I'm trying to display a grid, and have it the same size as a div. Here's the code:

html>
<head>
<title>Simple CSS Test Page</title>
<link rel="stylesheet" type="text/css" href="/ActiveWidgets253/source/styles/aqua/aw.css"></link>
<style>
.aw-quirks * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#mydiv { position: absolute; left: 10px; top: 0px; right: 10px; bottom: 80px; background: red; }
#myGrid { position: absolute; left: 15px; top: 15px; right: 15px; bottom: 85px; }
</style>
<script type="text/javascript" language="javascript" src="/ActiveWidgets253/source/lib/aw.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript" language="javascript">
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 myRow = ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"]

var myHeaders = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
var obj = new AW.Grid.Extended;

obj.setId("myGrid"); // necessary for CSS rules
obj.setHeaderCount( 2);
obj.setHeaderText(myHeaders); // js array (see top of this page)
obj.setHeaderText(["Sub 0", "Sub 1", "Sub 2", "Sub 3", "Sub 4"], 1); // js array for the second row of headers
obj.setColumnCount(5);
obj.setRowCount(20);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
document.write(obj);

</script>
</body>
</html>

The grid does not occupy a smaller area over the div, though it has the same style sheet specification. What am I doing wrong ?

Peter Winkler

April 8,

Can you elaborate a little more on exactly what it is you're trying to do? If you want the grid to completely cover the div, then why bother with the div? If you want the grid to be sized to sit in the div, then there are better CSS methods. Note that you should specify the grid inside the div so as to avoid any potential z-index issues.

Here's an example to illustrate an alternate method -

<style>
#mydiv  {background:red; border:10px outset green; margin:10px; height:90%; width:90%}
#myGrid {border:5px solid blue; margin:5px; height:90%; width:90%}
</style>
...
<div id="mydiv">
<script>
...
</script>
</div>

I've added some border styles and margins to make things stand out a little more. You can dispense with those once you understand them. The key is to set the height and width as percentages and have the grid relative to the div. So the div has its height and width set relative to its parent (the page) and the grid has its relative to the div.

Anthony

April 9,

The purpose here is to control the sizing of the grid. The div is only for illustration purposes that I can control the sizing of a standard html element with left/right and top/bottom settings. However, if I use the same settings on the grid, it does not size like the div does.

That seems odd to me, therefore I'm thinking I'm missing something. I'm not a css wizard, but I've applied numerous settings, including making the gird a child of the div.

So ultimately, I want the grid to be sized relative to the page, but not by specifying it's height/width but by specifying left/right and top/bottom coordinates

Peter Winkler

April 9,

The problem might be related to

- missing width:auto; height:auto;
- DOCTYPE which triggers quirks mode in IE (or no DOCTYPE)
- IE6

Alex (ActiveWidgets)

April 9,

width: auto; height: auto;

does the trick.

Thank you Alex

Peter Winkler

April 9,

This topic is archived.

Grid.Extended and css left/right top/bottum

See also:

Search

New Data Grid

Version 2