InfiniteTree nodes/height not calculated correctly with flexbox

[frankvdb7]

When I try to use flexbox with the InfiniteTree component like this:

render() {
    return (
        <div style={{ display: "flex", flexDirection:"column" }}>
          <InfiniteTree
              width="100%"
              height="100%"
              style={{ flex: "1 1 auto" }}
              rowHeight={30}
              data={someData}
           />
        </div>
    )
}

The div and InfiniteTree container correctly expand to height 100% in the inspector, but the InfiniteTree component only shows 5 nodes instead of filling in rows until the 100% height. So lets say we have room for 10 nodes of 30 pixels (100% height = 300px), it only show 4 nodes of 30 pixels (120px), so there is 180px of empty space.

Is there a way to solve this?

Thanks

[aalbul]

Hi, i faced the same issue today.
Looks like react-tiny-virtual-list does not really support passing percentages to it.

According to this screenshot it treats it as a regular item and trying to add offset to it :)
Not sure what could be a solution to this though.

[cheton]

As an alternative way, you may use the ref attribute and the ReactDOM.findDOMNode() function to get the offsetHeight of its container element, and then call this.setState({ height: containerElement.offsetHeight }) to trigger the second render.

[aalbul]

True. However:

1. it will cause double rendering. I suppose it will be more visible if you have a big tree, but still
2. react-infinite-tree states that it's possible to use string or number. Does it make sense to change documentation? :)

[cheton]

I found a statement from react-tiny-virtual-list's documentation:

* Width may only be a string when scrollDirection is 'vertical'. Similarly, Height may only be a string if scrollDirection is 'horizontal'

Since react-infinite-tree's scroll direction is vertical, the "width" prop can either be a number or string like "100%" or "auto", but the "height" prop must be a number in this case.

I will update documentation accordingly. Also, I see some issues (clauderic/react-tiny-virtual-list#25, clauderic/react-tiny-virtual-list#37) and PRs there (clauderic/react-tiny-virtual-list#30, ), hope it can be merged soon.