Grid Resize issues when using Flex Box Model

[matthughes]

I'm trying to set width/height of ng-grid using the CSS Flex Box Model. I have a simple master/detail view where master = grid, detail = selected item. detail is set to 300px, and grid = flex: 1 (e.g., use all available space). As I resize the browser, ng-grid stutters while resizing sometimes overlapping the detail box. This never happens if the left-hand side is a simple div with border.

Here is an example: http://plnkr.co/edit/FOkSFaYgjy49soWO2qTM?p=preview

Part of what I'm trying to understand is just what exactly the ng-grid.js does with regard to resizing.

[matthughes]

From what I can see below, we resize the grid both on window resize and if the actual grid element is forced to resize. However, from what I know, only IE supports the resize event. Is that true or am I mistaken about that?

        // resize on window resize
        var windowThrottle;
        $(window).resize(function(){
            clearTimeout(windowThrottle);
            windowThrottle = setTimeout(function() {
                //in function for IE8 compatibility
                domUtilityService.RebuildGrid($scope,grid);
            }, 100);
        });
        // resize on parent resize as well.
        var parentThrottle;
        $(grid.$root.parent()).on('resize', function() {
            clearTimeout(parentThrottle);
            parentThrottle = setTimeout(function() {
                //in function for IE8 compatibility
                domUtilityService.RebuildGrid($scope,grid);
            }, 100);
        });

[roblarsen]

$(window).resize != window.resize();
$(window).resize() == window.onresize = function(){}; \\or
$(window).resize() == window.addEventListener("resize",function(){});

window.onresize is supported all over the place. It's DOM Level 0. Primordial.

window.resize() is a method that resizes the window in IE only.

All the more reason to always use on: $().on("resize",func)

[roblarsen]

Also, to clarify, your issue is with the behavior of the grid while resizing? In the act of resizing?

[matthughes]

I should have been more clear about my resize question. From what I understand, every browser supports resize event on the window. Only IE supports resize on an arbitrary DOM element. That second resize handler never fires for me in Chrome.

My issue I guess is two fold:

1. Resizing the browser makes the grid stutter when resizing. This is with or without using the flex box model in my experience. Changing that setTimeout to a smaller number might help. And/or using something like underscore's _.throttle function to dampen repeated resize events. That way you could lower the threshold without sacrificing performance.

2. My other scenario is that sometimes the grid draws too wide, clipping the bounds set up for it by the flex box modal. This occurs when a scrollbar appears in one of the ancestor elements of the grid. The addition of the scrollbar does not get accounted for in the width calculation. Not sure if there is something in how I'm setting my DOM up or if this can be fixed in ng-grid.

[roblarsen]

Gotcha.

Re: 1. Yeah, I would expect it to. something like throttle is probably a good idea, even if we improve the performance of the grid rendering significantly. To me, the only resize event that really matters is the last on, anyway.

I'm curious about your second issue. I'll take a look. Going forward this piece should be simplified, as I want the browser to do more of these calculations if we can help it, but it would still be instructive to see what's going on.

[matthughes]

Hi @roblarsen, I added an example that shows this problem in action.

https://github.com/matthughes/ng-grid/blob/master/workbench/flexBox.html

In this example, I have a flex container with grid and another item. If the container starts out being hidden and then is displayed, the grid calculates its height as 0px. That is, until you resize the browser at which point everything is fine.

I have this exact issue trying to use ng-grid with bootstrap-ui's tabs. Grid starts out being hidden in the inactive tab, and when you switch to it, the grid is not being rendered correctly.