Problems with dynamically sized containers

[Dev63]

I love ui-grid (thank you!!), but it does not behave well in dynamically sized containers, either via flexbox or display:table.

Goal: The goal is to have my grid grow to fill the available space between a dynamic header and footer, which makes sense on certain pages because the page is primarily all about a single table, and it's a nice UI experience to use to have the grid expand to the dimensions the user can/wants to display. Setting a fixed height for the grid leads to an awful user experience in which the user sometimes has to scroll both the page and the table (or the table is very small and the user is frustrated by being unable to use his monitor fully). Note the header itself may dynamically change height depending on the browser window width, as things start to wrap.

Problems with display:table: There have been a few problems with using the grid in a flexbox, some documented elsewhere, so I decided to try to redo the whole site to use display:table instead. Unfortunately, take a look at this simple plunker. In Chrome on Windows:

• Notice that the table is way out of the box. This is due to the presence of ui-grid-selection. Widen the display portion of the plunker with your mouse, and it will now display correctly. Now try to narrow the display portion and watch all hell break loose.
• If you remove ui-grid-selection, things are better, but when you try to narrow the display, the grid refuses to shrink. Adding ui-grid-auto-resize changes nothing.
• The same is true for length: it will nicely elongate, but never shrink.

Surprisingly, flexbox seems to do better than display:table, but both have serious problems. Putting the grid in a standard div with height:100% and width:100% works nicely, but this is impractical for all the standard CSS reasons, unless you want nothing else on the page.

[smithscripts]

@Dev63 I'm not sure if this helps you or not, but this is what I ended up doing:

I wrapped the grid with a div and added my directive called element-size-monitor:

<div tru-element-size-monitor resize-height="dimensions.containerHeight" resize-width="dimensions.containerWidth">
    <div data-ui-grid="gridOptions" class="gridStyle"></div>
</div> 

Here is the directive:

module.directive('elementSizeMonitor',
[
function () {
    return {
        replace: false,
        restrict: 'A',
        scope: {
            resizeHeight: '=',
            resizeWidth: '=',
        },
        link: function (scope, element, attrs) {
            scope.$watch(
                function () { return [element[0].clientWidth, element[0].clientHeight].join('x'); },
                function (value) {
                    scope.resizeHeight = element[0].clientHeight;
                    scope.resizeWidth = element[0].clientWidth;
                }
            );
        }
    };
}]);

Then in the controller just add a watch:

    $scope.dimensions = {
        containerHeight: 0,
        containerWidth: 0
    }
    $scope.$watch('[' +
        'dimensions.containerHeight, ' +
        'dimensions.containerWidth, ' +
        ']', 
        function (newValues, oldValues) {
        if (newValues === oldValues) return;
        $scope.gridApi.grid.gridHeight = newValues[0];
        //BUG: -2 removes the excess width the grid provides inside a container
        $scope.gridApi.grid.gridWidth = newValues[1] - 2;
        $scope.gridApi.core.refresh();
    }, true);

@PaulL1 Would a solution similar to this add any value to the project? It has the benefit of not always having to do a check with a timer.

[PaulL1]

@c0bra: do you have a view on this option v's auto resize? I haven't looked at it in detail, but it looks like we'd be trading off a watch for a timer.

[Dev63]

@smithscripts I think I understand how your code resizes the grid when its container resizes, but my problem is that when I try to set the grid's container to take up 100% of the "remaining" height on the page, the grid starts to have problems because of the container type (flexbox or display:table). On the plus side, if you do use flexbox or display:table, the grid automatically resizes with no extra work needed (ui-grid-auto-resize not needed).

If you are not using either of those container types, how are you calculating what the height of the container should be?

[timoweiss]

The same issue seems to appear if look at the Demo. If you resize your window the layout breaks temporarily.

[yadielar]

I'm having similar problems. What is basically needed is a way to make the grid "responsive". Are you guys considering implementing this kind of feature at all? If so, would it be included for 3.0 or a future version?

I'm aware this is probably a very complex issue to solve. I haven't actually seen other responsive grid implementations myself with the scope ui-grid has. What are your thoughts on this?

Btw, thank you very much for the awesome work you all have put into this project! It's really impressive!

[PaulL1]

There is another issue with a similar concern out there, and it has a bit more information.

Basically it's to do with the order of rendering, we're noticing the resize and updating the grid width, but then IIRC it takes a digest cycle before the renderContainers settle down, and during that time you get a flicker. I'm pretty sure that it's possible to fix it, but the right answer (to me at least) is to change the way we're doing resizing so it's not so iterative. This would also fix (for me at least) a few things in the header heights. Although I have a feeling @c0bra already fixed that when we did the dynamic filter thing.

I think making it less iterative would mean some sort of promise architecture so that we could flag all the things we were planning to recalculate and then do it all in one go at the end - although even that sort of implies a timeout or a digest cycle.

It's a bit annoying to work with because it's a flicker on resize, so it's really hard to get a debug on it...clicking off the window (into the debugger) makes it stop happening I think. I tried for a while and then failed.

[PaulL1]

I think this is another flavour of #3031, noting that to link them together.

[Dev63]

Someone privately messaged me, asking for advice on how to get the grid to work in an expanding view (as described above).

Basically, you do something like this in your main page:

<head>
    <style>
        html, body { height:100% }
        .flex-col { display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column }
        .flex-expand { -webkit-flex-grow:1; flex-grow:1 }
        .flex-fixed { -webkit-flex-shrink:0; flex-shrink:0 }
    </style>
</head>
<body class="flex-col">
     <div class="flex-fixed">Perhaps some static info</div>
     <div class="flex-expand flex-col" style="position:relative">
        <div class="flex-expand flex-col" ui-view></div>
    </div>
</body>

Then in your view file, you label all top-level divs as flex-fixed, except for the grid div you do this:

<div ui-grid="grid.options" class="flex-grow"></div>

Now your grid will automatically expand or shrink to fit all remaining non-fixed space. The key is that you have to start with the flex at the body level, and follow it all the way down to the grid. This works reasonably well with a December 2014 version of ui-grid (automatically resizes with the window), but I haven't been testing it against later releases.

[Dev63]

Sorry for taking so long to reply. I have put directions in the original
thread
#2652 (comment).

On Wed, May 6, 2015 at 7:24 AM, Gargaroz [email protected] wrote:

@Dev63 https://github.com/Dev63 Hi, I'm experiencing this very issue
too and I want to ask you:

• Do you use ng-view to inject the template with the grid, in order to
  perform the flexbox method to auto resize the grid? If yes, can you help me
  in doing the same?

Here's a plunker http://plnkr.co/edit/CMdRvaYfnn0Ny0oNiXQ9, but I don't
know why it's not working... I'll leave it here just to give you what I
came up to trying to perform the flexbox method.

—
Reply to this email directly or view it on GitHub
#2652 (comment).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.