4

I am trying to use flex height for the tree with virtual scroll. However, when I set the tree container to 100% and set the flex height, the chunk of data is missing from the screen during the scroll.

I have added the working example here https://stackblitz.com/edit/angular-d2mavw

If I open the last rootDynamic49 node, only 20 children are visible. However, it has 50 children. On the other hand, when I set the height to 100px, all the children are visible.

Is there a way where I can keep the first div fixed on the top position and add scroll only for the tree with the flexible height?

Sadiksha Gautam
  • 5,032
  • 6
  • 40
  • 71

1 Answers1

2

When you use height: 100%; and expand the tree, the virtual scroll's viewport height is not getting updated to the new height of the tree. It stays at it's px value. We can omit this css altogether and set the height in the container instead, using display: grid;

app.component.css

.container {
    border: 1px solid black;
    display: grid;
    grid-template-rows: auto calc(100vh - 38.4px); // StackBlitz adds 8px padding to body and 'First div' has a height of 22.4px (8 + 8 + 22.4 = 38.4px).
}

calc(100vh - 38.4px) needs to be replaced by your desired height. Using % values here seems counterintuitive to what you mentioned in the OP about the 'First div' being fixed in the top position because if the div is given 100% it will stretch as per its content and whole div would scroll out of view.

Then all you need to is use display: inline; on the tree-container so that it fits within the main div.

angular-tree.component.css

.tree-container {
    display: inline;
}

Note: I have used 22.4 for the nodeHeight since on inspecting the nodes, the height is exactly 22.4px.

Here is a working example on StackBlitz. Here's a preview of the same.

nash11
  • 8,220
  • 3
  • 19
  • 55