Controlling GraphCanvas Size Within Parent Container

[rb-x]

I'm using a GraphCanvas component within a parent container, and I'm facing difficulties in controlling the size of the GraphCanvas. I want to either specify relative (percentage-based) or absolute (fixed pixel) width and height for the GraphCanvas. Currently, it takes up the entire window's space, and it even overlaps my side menu, and my attempts to apply CSS rules to the canvas element have not been successful.

Here's how I'm trying to set the size:

<div style={{ width: '50%', height: '50%' }}>
    <GraphCanvas nodes={nodes} edges={edges} />
</div>

I'm looking for a solution or guidance on how to make the GraphCanvas either match the size of its parent node or specify its width and height effectively via props maybe ?

[rickypaques]

Hi,
you can inspect element of the canvas and find this className (on image)

you can manipulation by DOM to get the className, set height and position you want.

[thobhanifreddy]

make position relative for parent div

<div style={{ position: "relative", width: '50%', height: '50%' }}>
    <GraphCanvas nodes={nodes} edges={edges} />
</div>

[wilkyrlx]

this didn't work for me - for some reason, the whole graph disappears

[wilkyrlx]

I was able to fix it by using fixed position

[faseidl]

Can you show the code that worked? (I've experimented with both fixed and relative and neither seems to work. Fixed makes the graph very tall (taller than the screen) and relative makes it disappear.)

[wilkyrlx]

For me, it was something like this:

<div style={{ position: "fixed", width: '75%', height: '75%'}}>
    <GraphCanvas etc... />
</div>

[faseidl]

Thanks! I got it to work using position relative, but the key was to specify an absolute height. Using a percentage resulted in a zero-high container.