About the height of foreign objects

[junseuk]

I'm currently working on creating network graphs based on the Ports demo code. I added some other elements in the Node element and its table to customize it. However, it seems that the height of the is not rendered properly so the button on the bottom of each node is half shown only. I'm using vuetify and vue 2. Is there any proper way to customize the node?

[gr1m1um]

you should call node.fitContent() manually after updating the node size, consider using nextTick(() => node.fitContent()) aswell if not working properly

[junseuk]

I'm creating Node elements using v-for and reference is defined as "node" which is the exactly same as the Port demo.
I created "render()" method and all the nodes and edges are created by for loop. After those for loops, I added the code below:
this.$nextTick(() => {
this.graph.graphNodes({ spacing: 50 })
this.$refs.screen.zoomNodes(this.graph.nodes, { scale: 0.7 })
this.$refs.node.fitContent()
})
And I get the error message saying this.$refs.node.fitContent() is not a function. Is the "node" from node.fitContent() the reference of HTML element?

[gr1m1um]

looping the nodes should do:

this.$refs.node.forEach(node => node.fitContent())

the graphNodes should be after fitting content aswell as they change their width / height

[junseuk]

Problem solved thank you!