Dynamic/Unknown height?

[ysk3a]

Cool library!

Any support for dynamic height?

Based on the https://github.com/lVlyke/lithium-ngx-virtual-scroll#inputs , the itemHeight if not set is automatic. What is it automatically doing? Setting a single height or per item? Just wanted to understand how it works.

I tried to modify the demo https://github.com/lVlyke/lithium-ngx-virtual-scroll-demo to mimic 'random-ish' height per item by: item-widget.component.scss add display block to img tag

  img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    display: block;

  }

item-widget.component.ts add

  randomHeight: number = Math.floor(Math.random() * (10 - 1) + 1);
  randomList: number[] = Array.from({ length: this.randomHeight }, (_, i) => i + 1)

item-widget.component.html change to

<ng-container *ngFor="let item of randomList">
  <img src="{{baseHref}}/favicon.ico">
</ng-container>

app.component.scss comment out height property

>.list-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      // height: 1.5rem;
...
   }

I can't confirm expected behavior in, lets say, a fresh angular project is normal but based on those few modification to the demo, it seems to work somewhat. scrolling sometimes makes the items really jumpy. Also, it seems that if you change the randomHeight to something like 20 or 40 you get a warning that scroll reached limit because of MAX_SCROLL_HEIGHT_PX. So does this mean the amount of items that can be rendered in the virtual scroll is limited to the max height since if it is required? This is in list mode not grid layout mode.

This part is kind of separate but any plans on add a working codesandbox or stackblitz demo link? forking the demo repo directly to those online editors seemed to error out.

[lVlyke]

Thanks for the feedback!

Cool library!

Any support for dynamic height?

Based on the https://github.com/lVlyke/lithium-ngx-virtual-scroll#inputs , the itemHeight if not set is automatic. What is it automatically doing? Setting a single height or per item? Just wanted to understand how it works.

The library was only designed to support items of equal sizes. itemWidth and itemHeight are used to tell the component what the size of each item is. If not declared, the library renders the first item in the list and uses its size for each subsequent item. I will make sure to better clarify this behavior in the README.

While adding support for dynamic item heights would be nice, it would require a significant refactoring of the library and isn't planned to be supported currently.

Also, it seems that if you change the randomHeight to something like 20 or 40 you get a warning that scroll reached limit because of MAX_SCROLL_HEIGHT_PX. So does this mean the amount of items that can be rendered in the virtual scroll is limited to the max height since if it is required? This is in list mode not grid layout mode.

MAX_SCROLL_HEIGHT_PX in the demo app (which is equal to 33554400 pixels) is actually an element size limitation of most major web browsers. Once an element reaches that height it will just stop rendering additional child elements. In this case you could be seeing the warning due to the undefined behavior from having unequal item heights.

This part is kind of separate but any plans on add a working codesandbox or stackblitz demo link? forking the demo repo directly to those online editors seemed to error out.

That should be possible. I'll look into adding a Stackblitz link for the demo in the next update.