Horizontal Scroll Bar - Grid

I changed this line
#myGrid {width: 80%; height: 80%;}
in ActiveWidgets/examples/grid behavior - scrolling/static.htm

When the browser window is small, the horizontal scroll bar appears.

But if my horizontal browser size is big, and I can see the entire table there is no horizontal scroll bar. (It is expected). But when i reduce the window horizontally, the horizontal scroll bar doesn't appear.

I need to refresh the page for the horizontal scroll bar to appear.

How do i make the horizontal scroll bar visible, as I change the size of the window? (from max to a small size)


<style type="text/css">

#myGrid {width: 80%; height: 80%;}
#myGrid .aw-alternate-even {background: #eee;}

</style>

This should work out of the box in IE. In other browsers you should add the patch described here -

http://www.activewidgets.com/javascript.forum.25598.1/grid-scrollbars-overflow-not-correct.html

Here is the code -

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);
}