Dynamic row height depending on amount of lines in text

[pixxelia]

how can the height of the items be set dynamically based on the text size (e.g. number of lines or calculated item height)?

[anil1712]

@pixxelia did you get any solution for this?

[pixxelia]

@pixxelia did you get any solution for this?

no :-( did you?

[anil1712]

@pixxelia did you get any solution for this?

no :-( did you?

Not yet 👎

[lifejuggler]

will take a look

[anil1712]

Thanks @lifejuggler It would be better if we get the same for the width.

[lifejuggler]

I don't follow @anil1712 why we'd need dynamic row width

[anil1712]

I don't follow @anil1712 why we'd need dynamic row width

Please see the attached screenshot, in my case the texts are getting overlapped.

So may be if we manage the width based on the content then it would be better

[lifejuggler]

maybe but if I do add the width its not going to be for this issue

[p8ul]

Looking forward to getting this fixed. The usability is lost when one uses the plugin to render dynamic components.

[topolanekmartin]

Please take a look at this PR https://github.com/frontend-collective/react-sortable-tree/pull/774. I solved the dynamic row height and I will look forward to your suggestions now.

[billyz313]

How do we achieve the dynamic height?

[Gerpea]

We can use some dirty solution, while PR #774 not merged.

Create a custom theme based on default theme. Add custom attribute to element with rst__rowLabel class with treeIndex value.

 <div className={classnames('rst__rowLabel', rowDirectionClass)} dataid={treeIndex}>

Write rowHeight function

rowHeight: ({ treeIndex }) => {
    const treeEl = document.querySelector(`[dataid="${treeIndex}"]`);
    return treeEl ? treeEl.offsetHeight : 0;
  },

Do not forget change rst__rowLabel class, so that it has the height of the content.