Issue for embedded cytoscape graphs

[nfigay]

I'm preparing a cursus on semantic interoperability, for which I want include in a section a cystoscape.js graph.

It lead to integrate a div as a container for a canvas representation of the visual graph within a section.

I'm facing here a problem, with the positioning of the canvas and the div being not aligned anymore in the displayed sections/slides.
I didn't succeed in catching which mechanism is leading to this within reveal: some CCS, code logic...?

   <div class="reveal">          
                        <div class="slides">
                            <section data-graph="Graph_1">
                                <div class="title-zone">
                                    <p style="font-size: 0.6em;">Test inclusion graph
                                    </p>
                                    <h4 style="font-size: 0.8em;">Premier graphe</h4>
                                </div>
                                <div class="content-zone">
                                    <div class="text-zone">
                                        <p style="font-size: 0.4em;text-align: left;">
                                            [Introduction concise expliquant le sujet abordé]
                                        </p>
                                        <ul style="font-size: 0.4em;">
                                            <li><b>[Point clé #1] :</b>
                                                <ul style="font-size: 0.7em;">
                                                    <li>[Explication détaillée du point clé #1]</li>
                                                </ul>
                                            </li>
                                            <li><b>[Point clé #2] :</b>
                                                <ul style="font-size: 0.7em;">
                                                    <li>[Explication détaillée du point clé #2]</li>
                                                </ul>
                                            </li>
                                            <li><b>[Point clé #3] :</b>
                                                <ul style="font-size: 0.7em;">
                                                    <li>[Explication détaillée du point clé #3]</li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <p style="font-size: 0.4em;text-align: left;">
                                            [Conclusion ou transition vers la prochaine diapositive]
                                        </p>
                                    </div>
                                    <div  style="width:400px; height: 400px;" class="image-zone">
                                        <div style="position: absolute;  width: 100%; height: 100%;" id="cy-container">
                                            <div  style=" position: relative;    width: 100%; height: 100%;border: 2px solid black;background-color: yellow;" id="cy"></div> <!-- The Cytoscape container -->  
                                    </div>
                                    </div>
                                </div>
                            </section>

The canvas is translated to the right compared to the container, a half width of the container to the right.
Any idea concerning what the reason can be? Did you face similar issues in your usage of reveal.js?

[Martinomagnifico]

Probably CSS. Position: absolute needs a parent of which the position is also set.

<div class="image-zone" style="width:400px; height: 400px; position: relative">
    <div id="cy-container" style="position: absolute; width: 100%; height: 100%;">
        <div id="cy" style=" position: relative; width: 100%; height: 100%;border: 2px solid black;background-color: yellow;"
        </div><!-- The Cytoscape container-->
    </div>
</div>

[nfigay]

Thanks for the reply, Martin.
I changed relative and absolute appropriately.
Problem persists.
Exploring the html, i identified that the cy container contains 3 canvas, with inappropriate top and bottom.
One has top =0 left=-50% and the other have no top and no left.
I created dedicated style for those in the style section with important, but it doesn't apply.
So I suppose that some reveal.js code modify properties dynamically over the style.
But not obvious to find in the code what produce this change.

[nfigay]

I found a way to manage it

// Add an event listener for the 'slidetransitionend' event
Reveal.on('slidetransitionend', function(event) {
    // Check if the current slide contains the Cytoscape container
    if (event.currentSlide.querySelector('#cy')) {
        // Select all canvas elements within the Cytoscape container
        var canvases = event.currentSlide.querySelectorAll('#cy canvas');
        canvases.forEach(function(canvas) {
            // Correct the positioning styles
            canvas.style.position = 'absolute';
            canvas.style.top = '0';
            canvas.style.left = '0';
        });
        // Optionally, trigger a resize to ensure proper rendering
        cy.resize();
    }
});

No I've to find the good strategy to embed graphs in presentation, managing the dynamic creation of the cy container