3.0.5

Grid - Horizontal Scroll Bar - 5 or 6 Pixels

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.
December 28,
With 'standards mode' doctype the style.width refers to the content width (total width minus border and padding).
Alex (ActiveWidgets)
January 4,

This topic is archived.

See also:


Back to support forum