Setting height of mdVirtualRepeatContainer

[tylerjames]

I have achieved excellent performance improvements by switching from a vanilla ngRepeat to mdVirtualRepeatContainer. However I'm having a problem when it comes to setting the height of the container. My page needs to be responsive or at the very least sized appropriately for a given screen. I can only get the directive to work if I set its height explicitly in my CSS, which means if someone has a smaller or larger monitor the height won't be ideal.

I've tried creating a directive that changes the height of the container element in the directive's link() function using elem.css('height', '600px'); Inspection proves that the resizing worked.

However now none of the rows in the container will load. I end up with a big empty div.

I've tried several things from this thread including:

1. Calling mdVirtualRepeatContainer.updateSize(); from inside my custom directive.
2. Broadcasting scope.$broadcast('$md-resize')
3. Triggering angular.element(window).triggerHandler('resize');

But none of these have worked.

Is there some kind of recognized way of setting the height of the '' element that doesn't break the whole thing?

Thanks.

[kevLinK]

Some months late, but I've been having the same problem, so I made a directive to complement the virtual repeat.

angular.module('app') .directive('updateSize', [
        function () {
            return {
                restrict: 'A',
                require: '^mdVirtualRepeatContainer',
                link: function(scope, element, attributes, mdVirtualRepeatContainer) 
                {
                    var computedStyle = getComputedStyle(element[0].parentNode);
                    elementHeight = element[0].parentNode.clientHeight;  // height with padding
                    elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
                    angular.element(element).css('height', elementHeight + 'px');
                    scope.$watch(function ()
                    {
                        var computedStyle = getComputedStyle(element[0].parentNode);
                        elementHeight = element[0].parentNode.clientHeight;  // height with padding
                        elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
                        return elementHeight;
                    }, function(value){
                        angular.element(element).css('height', value + 'px');
                        mdVirtualRepeatContainer.setSize_(value);
                    });
                }
            };
        }
    ]);

So you call it like

<md-virtual-repeat-container update-size>
    <md-list-item md-virtual-repeat="item in controller.list" md-item-size="50">
        content
    </md-list-item>
</md-virtual-repeat-container>

Things to notice:

The virtual repeat container element still must have a proper height, it won't accomodate to the virtual repeat height, but with the directive, the virtual repeat will accomodate to the container's dynamic height.

Make sure you use the md-item-size to the expected height of each element, otherwise the number of displayed elements won't be correct.

My directive already takes in count the padding to calculate the height, and only works in IE11+ and moderns browsers, I used this as reference so you can implement the fallback, because I won't support older browsers
Get the height of an element minus padding, margin, border widths

[Splaktar]

@kevLinK thank you for sharing your solution here. Closing this as @tylerjames hasn't indicated that the solution did not work for him.