How to set dynamic height of nodes based on html renders inside div and set x,y position acording to that.

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.

https://xyflow.com

MIT License

26.09k stars 1.67k forks source link

How to set dynamic height of nodes based on html renders inside div and set x,y position acording to that. #4837

Open VijayRathod20 opened 3 days ago

VijayRathod20 commented 3 days ago

What platform were you using when you found the bug?

React Flow / Svelte Flow version:
Browser and version:
OS and version:

Live code example

No response

Describe the Bug

Steps to reproduce the bug or issue

Created custom node with more data render inside the node , the height is increased but placeholder node not set properly

Expected behavior

Screenshots or Videos

No response

Additional context

No response

moklick commented 17 hours ago

Please provide a codesandbox for this.

It seems that the height is correct but the layout is not updated accordingly. You could trigger a re-layout whenever the height of a node changes for example by comparing prev and current values or use the dimension change of onNodesChange.

@peterkogo @hayleigh-dot-dev what do you think about an useOnNodesMeasure hook and/or a onNodesMeasure prop?