Dynamic node height problem on 0.0.14

[basyusuf]

Node style

const DefaultBox = styled.div`
  position: absolute;
  padding: 2px 2px;
  width:250px;
  background: white;
  color: black;
  border-radius: 3px;
  border:1px solid white;
  height:auto;
  border-color:${props => props.error?"red":"white"}
  -webkit-box-shadow: 0px 0px 7px 1px rgba(120,120,120,0.42);
  -moz-box-shadow: 0px 0px 7px 1px rgba(120,120,120,0.42);
  box-shadow: 0px 0px 7px 1px rgba(120,120,120,0.42);
`

Custom Node

<DefaultBox ref={ref} {...otherProps} error={this.props.error} key={node.id}>
        <BoxContent>
          {node.text}
          {children}
        </BoxContent>
</DefaultBox>

When Node is like this, it goes into space.The node is getting too long.I try max-height but it didn't help. Does anyone have any solutions?

[georginaso]

In the 0.0.14 version, if you have a custom Node component and you don't set a fixed height, the node grows uncontrolled.

Here you can find an example: https://codesandbox.io/s/show-arrow-head-pqdck?file=/src/index.js

@basyusuf I didn't find a way to solve this unless of adding a fixed height, like: height: 150px :/

[basyusuf]

I am looking for a solution to the dynamic height problem, the fixed height is not the solution.

[georginaso]

I think that the padding is causing the wrong behaviour, try with this basic CustomNode:

const CustomNode = styled.div`
  position: absolute;
  -webkit-transition: 0.3s ease box-shadow, 0.3s ease margin-top;
  transition: 0.3s ease box-shadow, 0.3s ease margin-top;
  background: white;
  border-radius: 4px;
  min-width: 200px;
`;

In my case, I have moved the padding that I had in the CustomNode component and I put it in the CustomNodeInner outer div.

[tahmid-shahriar-lincx]

having the same issue with Custom Nodes, @basyusuf found any workarounds? @georginaso both padding and fixed-height solutions are not working for me.

https://mrblenny.github.io/react-flow-chart/index.html?path=/story/sidebar--drag-and-drop

the storybook demo has same behavior once you zoom in and then drag and drop. the infinite height growth seems to stop once I zoom out, could be related to zoom somehow?

[georginaso]

@tahmid-shahriar-lincx are you using a custom Node and NodeInner?

[tahmid-shahriar-lincx]

@georginaso yeap

[tahmid-shahriar-lincx]

setting maxScale to 0.9 seems to stop this uncontrollable height growth, but can't zoom in past 0.9 scale

config={{
    zoom: {
        maxScale: 0.9,
        minScale: 0.1
     }
}}