The browser horizontal bar is always present. I don't understand why the Active Widgets grid is about 5 pixels different?
Also, In firefox when you resize the browser to the left, the grid horizontal scroll bar becomes active (This is Alex's code from a recent reply). But when you resize to the right, the grid horizontal scroll bar dissapears.
Please put the following file in the ActiveWidgets\examples\grid behavior - scrolling directory.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../../runtime/lib/aw.js" type="text/javascript"></script>
<link href="../../runtime/styles/system/aw.css" rel="stylesheet">
<script type="text/javascript">
window.onload = window.onresize = init;
function init()
{
var header = document.getElementById( "header" );
var footer = document.getElementById( "footer" );
var bodyDiv = document.getElementById( "bodyDiv" );
var nav = document.getElementById( "nav" );
var content = document.getElementById( "content" );
var contentHead = document.getElementById( "contentHead" );
var contentBody = document.getElementById( "contentBody" );
var docWidth = document.documentElement.clientWidth - 1;
var docHeight = document.documentElement.clientHeight - 1;
header.style.width = docWidth + "px";
footer.style.width = docWidth + "px";
bodyDiv.style.width = docWidth + "px";
bodyDiv.style.top = header.clientHeight + 1 + "px";
bodyDiv.style.height = docHeight - header.clientHeight - footer.clientHeight + "px";
nav.style.width = "150px";
nav.style.height = docHeight - header.clientHeight - footer.clientHeight + "px";
content.style.width = docWidth - nav.clientWidth + "px";
content.style.height = bodyDiv.clientHeight + "px";
content.style.left = nav.clientWidth + 1 + "px";
contentHead.style.height = "150px";
contentBody.style.top = contentHead.clientHeight + 1 + "px";
contentBody.style.width = content.clientWidth + "px";
contentBody.style.height = content.clientHeight - contentHead.clientHeight + "px";
var myGrid = document.getElementById( "myGrid" );
myGrid.style.width = contentBody.clientWidth - 1 + "px";
myGrid.style.height = contentBody.clientHeight - 1 + "px";
fixNonIEScroll();
}
function fixNonIEScroll()
{
if (!AW.ie){
window.addEventListener('resize', function(event){
var i, r = document.evaluate('//span[@onresize]', document, null, 6, null);
for (i=0; i<r.snapshotLength; i++){
var node = r.snapshotItem(i);
if (node.getAttribute('onresize') == 'AW(this,event)'){
AW(node, event);
}
}
}, false);
}
}
</script>
<style type="text/css">
body { margin: 0px; padding: 0px }
div { margin: 0px; padding: 0px; xborder: 1px solid red; }
div#header { position: absolute; top: 0px; left: 0px; background: yellow }
div#footer { position: absolute; bottom: 0px; left: 0px; background: yellow }
div#bodyDiv { position: absolute; left: 0px; }
div#nav { background: green }
div#content { position: absolute; top: 0px; }
div#contentHead { background: red }
div#contentBody { background: blue }
</style>
</head>
<body>
<div id="header">header
</div>
<div id="bodyDiv">
<div id="nav">nav
</div>
<div id="content">
<div id="contentHead">contentHead
</div>
<div id="contentBody">
<span id="myGrid"></span>
<script type="text/javascript">
var grid = new AW.UI.Grid;
grid.setId("myGrid");
grid.setHeaderText("header");
grid.setCellText(function(col, row){return col + "-" + row});
grid.setColumnCount(10);
grid.setRowCount(20);
grid.setVirtualMode(false); // disable virtual scrolling
grid.refresh();
</script>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
</html>
Marc.
With 'standards mode' doctype the style.width refers to the content width (total width minus border and padding).