Canvas elements moved by 50% to the right of the CytoscapeComponent

[wojciechteclaw]

Hello everyone, I tried to use cytoscape library instead of Force-graph-2d in my project. However, I have a problem because all canvas elements are moved exactly by 50% to the right of the correctly placed CytoscapeComponent. Do you have any advice on what I should change to have these elements aligned each other?

` interface GraphProps { graphData: GraphData; }

Cytoscape.use(COSEBilkent);
const layout = { name: "cose-bilkent", idealEdgeLength: 200,  };

const elements: Cytoscape.ElementDefinition[] = [
    { data: { id: "a" } },
    { data: { id: "b" } },
    { data: { id: "ab", label: "sample", source: "a", target: "b" } },
];

const Graph: FC<GraphProps> = ({ graphData }) => {
    return (
        <div id="graph-element">
            <CytoscapeComponent
                elements={elements}
                layout={layout}
                style={{ width: "600px", height: "600px"}}
            />
        </div>
    );
};

export { Graph };

`

[joshbernsteint]

I figured out the issue. At least for me, I needed to set text-align: left. When I had it at center, that's what was causing the issue for me.

[wojciechteclaw]

Hi, I think the problem in my cast was related to the display of parent components.