Virtually Infinite Container (Infinite Width)

Full width menu with negative margin gives infinite horizontal scroll on safari and ios

To avoid triggering horizontal scrolling, you need to set overflow-x:hidden on both the html and body elements.

Infinite scroll in qooxdoo with virtual list

You can use the same technique like the VirtualTree uses to adapt the row width. The idea is to wait until the WidgetCell layer has done the rendering. This will be notified with an event. Than ask the layer for all visible rows and adapt the height for these widgets. But do this asynchronous for performance reasons:

qx.Class.define('my.List', {
  extend: qx.ui.list.List,

  members:
  {
    syncWidget : function(jobs)
    {
      qx.log.Logger.debug("syncWidget");

      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;

      for (var row = firstRow; row < firstRow + rowSize; row++)
      {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget != null)
        {
          var height = widget.getSizeHint().height;
          qx.log.Logger.debug("height: " + height + " row:" + row + " widget: " + widget.getDay())
          this.getPane().getRowConfig().setItemSize(row, height);
        }
      }
    },

    _initLayer : function()
    {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
    },

    _onUpdated : function(event)
    {
      if (this.__deferredCall == null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
          qx.ui.core.queue.Widget.add(this);
        }, this);
      }
      this.__deferredCall.schedule();
    }
  }
});

Here is the code in the playground http://tinyurl.com/qcy8a7c

angular cdk virtual viewport setting dynamic height

I got a fix which considers the number of elements in the list to set the container height. It calculates the amount of height for the container until it reaches the final height value. Follow these steps and let me know.

1. Keep a reference of cdk-virtual-scroll-viewport in your component

We need this to be able to call checkViewportSize later and make CdkVirtualScrollViewport to recalculate its internal sizes.

Component

@ViewChild('scrollViewport')
private cdkVirtualScrollViewport;

Template

<cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
...
</cdk-virtual-scroll-viewport>

2. Calculate the list container height based on the number of elements in the list

Component

calculateContainerHeight(): string {
  const numberOfItems = this.items.length;
  // This should be the height of your item in pixels
  const itemHeight = 20;
  // The final number of items you want to keep visible
  const visibleItems = 10;

  setTimeout(() => {
    // Makes CdkVirtualScrollViewport to refresh its internal size values after 
    // changing the container height. This should be delayed with a "setTimeout"
    // because we want it to be executed after the container has effectively 
    // changed its height. Another option would be a resize listener for the 
    // container and call this line there but it may requires a library to detect 
    // the resize event.

    this.cdkVirtualScrollViewport.checkViewportSize();
  }, 300);

  // It calculates the container height for the first items in the list
  // It means the container will expand until it reaches `200px` (20 * 10)
  // and will keep this size.
  if (numberOfItems <= visibleItems) {
    return `${itemHeight * numberOfItems}px`;
  }

  // This function is called from the template so it ensures the container will have 
  // the final height if number of items are greater than the value in "visibleItems".
  return `${itemHeight * visibleItems}px`;
}

Template

<div [style.height]="calculateContainerHeight()">
  <cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>
</div>

It should be all. You only need to tweak itemHeight and visibleItems in the function according to your circumstances to get the result you're expecting.

---

Related Topics