How to control VirtualizationList height / how to configure how many items to display?

[sgielen]

trafficstars

From the documentation, I can't find out how to set a minimum height for the VirtualizationList.

I've tried setting the .vl-items { height: 100% !important; } but it is causing missing entries at the bottom, because the VirtualizationList update method results become outdated when the height of the VirtualizationList changes. I see that the VirtualizationList controls its .vl-items height (this.totalHeight).

From what I've investigated so far, I see the following events:

• On initial update() call, there are no items yet, clientHeight is 19 px. Start, end, top, bottom are all 0.
• On second update() call, there are 9 items, 1 is rendered. It has height 36, avgHeight is 36, clientHeight is 36, buffer is 200, so there is 236px of space. Since avgHeight is 36, end becomes 7 (start is 0), meaning 8 items are drawn out of 9 available. So far, so good.
• However, when this.end changes, Vue recomputes visibleItems(), which changes the DOM to make the VirtualizationList a lot larger.
• This makes the enclosing element larger, so the height: 100% makes the VirtualizationList a bit larger yet, making its $el.clientHeight 328px, large enough to show more items.
• Since this does not trigger a new update() call, those extra items are not actually shown. If I trigger the update() manually, they are shown, but this causes more space to be taken, ergo the parent height changes, so the height: 100% causes the VirtualizationList to grow again, causing more items to be shown, etc. etc.

However, I can't find an alternative to this from the documentation. Could you please help me out?

[sgielen]

I've tried setting height: 200px on the Draggable component itself, which sets the height correctly, but the buffered items are visible under the height of the component. If I set height: 200px; overflow: hidden; this is resolved, but the Draggable is not scrollable...

[sgielen]

I just tried setting height: 200px; overflow: auto; on the Draggable and with that it has a controlled height and it is scrollable. Is that the preferred solution? Shouldn't a Draggable that has virtualization enabled always be overflow: auto; for example?

[phphe]

First, find the tree root element which has class 'he-tree'. Then add 2 css to it, height: 400px; overflow:auto. This works in https://hetree.phphe.com/examples, source: packages\website\src\views\examples.vue