React-sortable-tree: Is the Height mandatory?

[gmarathi-nisum-com]

<div style={{ height: 400 }}> <SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} /> </div>

In the snippet above, does the height:400 of the outer Div section mandatory??
When i provide height:auto, the tree is not displaying.

Want to make the height auto-adjustable according to screen size without restircting the height.

[DharanBro]

You can set heightto 100% and set isVirtualized={false} but make sure to read the documentation about isVirtualized before doing so.

[nmonterroso]

@gmarathi-nisum-com I wanted to accomplish something similar. Here's what I ended up with:

import { WindowScroller } from 'react-virtualized';
import { SortableTreeWithoutDndContext } from 'react-sortable-tree';
import 'react-virtualized/styles.css';

render() {
                ...
                <WindowScroller>
                    {windowScrollerProps => (
                        <SortableTreeWithoutDndContext
                              className: 'some-class',
                              reactVirtualizedListProps: {
                                  ...windowScrollerProps,
                                  autoHeight: true
                              }
                        />
                    )}
                </WindowScroller>
                ...
}

// something is setting these to "0"
.some-class > div:first-child {
  height: auto !important;
  width: auto !important;
}

I haven't tried but this probably also works with SortableTree. See the docs for WindowScroller and List for more info.

Hope this helps.

[fritz-c]

If you want to make it adjust to the full height of the screen, use height: 100%;, as DharanBro has said. If you want the height to exactly match the height of all your rows stacked on each other, with no scrolling within the component, you would need to change the value of isVirtualized while acknowledging the functionality loss described next to that prop in the readme.

[barrymichaeldoyle]

You could also make use of flexbox to adjust height to fit your needs. It's working like a charm for me :1st_place_medal:

[jkeruzec]

Have a look at the example, they are using a calc properties for the height :
css height: calc(100% -/+ px)

[Martinnord]

@barrymichaeldoyle Can you please show how you did it with flexbox? Would be super appricated.

[MattCowski]

import SortableTree, { getVisibleNodeCount } from "react-sortable-tree"
...
const count = getVisibleNodeCount({treeData:this.props.treeData})
style={{height: count * 62}} // height of each node

[Imagine-F]

@MattCowski Thank you sir <3 but this affects the performance pretty much since he calculates the height for every action you do. So a good solution for little applications but if your treeview is big be careful.