Material: mdVirtualRepeat: row with different heights

[vladimir-barsuchenko]

I have md-virtual-repeat twitching when it has rows with different height.

On the image below. All messages are separate even if they don't have an avatar. But content length is different

stackoverflow issue

And answer from post:

Efficient scroll lists like md-virtual-repeat or collection-repeat need to know the height 
of each item in order to work. That’s because they need to know the scroll position, e.g. 
to show a scrollbar or to be able to skip frames for quick swipe-down motions. 
The scroll position itself can only be found if you know both how much has been scrolled
(we need the height of elements above) and how much there is left to scroll (we need the 
height of elements below).

What you can do is use a factory to compute the height of each element before injecting 
them into the loop. This can be done by creating a container with the same properties as 
the target container (e.g. CSS classes), appending the newly-loaded elements, compute their 
height (using element.offsetHeight), and removing the container after.

Be aware that this is quite heavy and will likely cause a small lag spike.

After trying predefined height nothing changed.

Also seems like scroll and offset depend on item size which is taken from 1st element

var block = this.getBlock_(0);
  if (!block.element[0].parentNode) {
    this.parentNode.appendChild(block.element[0]);
  }

  this.itemSize = block.element[0][
      this.container.isHorizontal() ? 'offsetWidth' : 'offsetHeight'] || null;

@kseamon Any ideas?
Any changes to get it supported? Because message length(height) may vary
Maybe some workaround?

Any ideas how it's made in G+? Seems like they have virtual scroll too. And block height varies

Thanks!

Angular v.1.5.8
Angular Material v.1.1.1
Browser Chrome 54.0.2840.99 m (64-bit)

[simplypixi]

I have the same issue. Any ideas?

[vladimir-barsuchenko]

@simplypixi Seems like it's not an issue. Virtual Repeat was not meant to deal with dynamic height

[Splaktar]

As mentioned in https://github.com/angular/material/issues/9422#issuecomment-350540226, Virtual Repeat requires static and equal heights in order to make scrolling fast.