Graph not included in its container

[francesco-ficarola]

I'm trying to draw a graph using sigma.js. I'm already done, but the problem is that the graph is not included in the corresponding container.

See the screenshot below:

This is my html code:

<div id="graph">
    <div id="sigma-container">
    </div>
</div>

and this is the CSS:

#graph {
    position: relative;
    width: 700px;
    min-height: 400px;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid #555;
    padding: 20px;
    text-align: center;
    background-color: #fff;
}

#sigma-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

then, I generate my graph calling:

s = new sigma({ graph: g, container: 'sigma-container' });

where:

g = { nodes: [1, 2, 3, ...], edges: [1, 2, 3, ...] };

[francesco-ficarola]

At present I've solved setting the following in my CSS:

.sigma-scene, .sigma-labels, .sigma-mouse {
    left: 0;
}

but why do I have to change the sigma.js classes?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[agajdosi]

I have also faced this issue, took some time to find it is caused by: text-align: center; being inherited from some parent. Fix was to set text-align: left; on the #sigma-container. Would be nice if Sigma could detect it and behave accordingly.