Grid scrollbars overflow not correct in non-IE browsers on grid.resize

Grid scrollbars overflow not correct in non-IE browsers on grid.resize

In IE the scrollbars hide automatically when a grid resizes large enough. And become visible again when the grid resizes to small.
In non-IE (tested with new Firefox and Chrome) the scrollbars do not disappear (or appear!).

I tested this behavior with the standard quickref example ‘grid’ with this modification at the end of the HTML:

(…)
<br>resize the grid <a href="#" onclick="gridresize(this);">Small</a>&nbsp;<a href="#" onclick="gridresize(this);">Large</a>
<script>gridresize=function(s){
var w,h;if(s.innerHTML.toLowerCase().indexOf('small')!=-1){w=200,h=100;}else{w=600,h=500;}obj.setSize(w,h);}
</script>
</body>
</html>

Also: in non-IE: when creating the grid and the size is large enough, the scrollbars always appear for some time before disappearing.

This is the old AW bug - unfortunately other browsers do not fire resize event on html elements (only on window element) and there is no way to detect changes in the size of the grid control or its parent html element.

To fix this issue you should add the patch which forwards window resize events to the grid -

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

plus add this function to the grid control and call it each time when you change the grid size from your code -

grid.updateSize = function(){

    var e = this.getScrollTemplate().element();

    if (e) {
        this.setContentWidth(e.offsetWidth, "total");
        this.setContentHeight(e.offsetHeight, "total");
    }
}

...

grid.setSize(w, h);
grid.updateSize();