md-virtual-repeat does not work without predefined height

[uriva]

codepen: http://codepen.io/uriva/pen/doxdVP

[Pusnow]

I think md-virtual-repeat-container should have fixed height

[uriva]

Yup. That was the issue. Perhaps a doc clarification on that point?

[Pusnow]

I referred to official doc's sample codes

+1 Would be nice to figure out a way to allow flexable heights.

[kseamon]

It's on my to-do list. It's tricky because any solution comes with performance trade-offs.

[0xdevalias]

+1 This tripped me up for a while, a note on the docs would be cool.

[colinskow]

Here's my workaround in the mean time:

this.getListHeight = function() {
  return {height: '' + ($window.innerHeight - 72) + 'px'};
};
$window.addEventListener('resize', onResize);
function onResize() {
  $scope.$digest();
}
$scope.$on('$destroy', function() {
  $window.removeEventListener('resize', onResize);
});

Then in the HTML

<md-virtual-repeat-container id="vertical-container" ng-style="ctrl.getListHeight()">
...
</md-virtual-repeat-container>

[Madd0g]

@colinskow - Thanks, it's close to working, it works for me on refresh, but not on regular state-changes
(Note that I'm measuring the parent node of the virtual list, not the body like in your example).

A huge +1 for making virtual-repeat flexable.

[colinskow]

@Madd0g - I actually refactored it a little bit and it seems to work better. At least on Safari and Chrome it always appears to be the right size.

this.listStyle = {
      height: ($window.innerHeight - 112) + 'px'
    };
    $window.addEventListener('resize', onResize);
    function onResize() {
      self.listStyle.height = ($window.innerHeight - 112) + 'px';
      if(!$scope.$root.$$phase) $scope.$digest();
    }

<md-virtual-repeat-container id="vertical-container" ng-style="ctrl.listStyle">
...
</md-virtual-repeat-container>

[Madd0g]

@colinskow - that does work better, but it seems like the internal md-list doesn't get resized to the necessary height, I don't even understand what causes it to be smaller in size, I've combed through the styles tab and don't see anything that can cause it :(

EDIT: it's not a CSS issue, the problem is that the virtual repeater runs before that sizing script and renders a smaller number of items. Maybe there's a way to solve it with a directive and priorities?

EDIT: this is my solution, it calls an internal setSize_ method of the virtual container:

return {
    restrict: 'A',
    require: '^mdVirtualRepeatContainer',
    link: function(scope, element, attributes, mdVirtualRepeatContainer) 
    {
        angular.element(element).css('height', element[0].parentNode.offsetHeight + 'px');

        scope.$watch(function ()
        {
            return element[0].parentNode.offsetHeight;
        }, function(value){
            angular.element(element).css('height', value + 'px');
            mdVirtualRepeatContainer.setSize_(value);
        });
    }
};