flex layout not respected

[abulka]

When I embed cytoscape in a flex layout

      <div class="box">

        <div class="row header">
            <h1>HEADER AREA</h1>
        </div>

        <div class="row content">CYTOSCAPE AREA</div>

        <div class="row footer">
            <p><b>footer</b> (fixed height)</p>
        </div>
      
    </div>

(which keeps everything the user sees in the visible window, with a nice header and footer area) - as soon as I enable the expand-collapse extension the cytoscape area becomes huge and escapes/overflows the HTML document window, pushing the footer far, far down.

Interestingly when you hit the Run with Js button in the demo of this problem, you initially see the correct flex layout

but as the page fully loads, the problem happens. If it was a style issue, I'd maybe tackle it myself, but there are no required styles for the expand-collapse extension, so it must be in the code?

P.S. The node-editing extension sometimes also does this, but no other extension - all other extensions are compatible with a flex layout.

[hasanbalci]

@abulka It seems like this is a valid issue. Probably, the way we use canvases that are drawn for expand/collapse cues or resize handles conflicts with the flex layout. Currently, we don't have enough resources to deal with this issue, if you want, you can open a pull request. Thanks!

[OskarHowe]

@abulka Hi, I experience the same problem. Have you found a fix in the meantime ?

[abulka]

I have no workaround sorry - my cytoscape project is on hold till this is fixed, if ever.