search

iVis-at-Bilkent / cytoscape.js-expand-collapse

A Cytoscape.js extension to expand/collapse nodes for better management of complexity of compound graphs
MIT License
123 stars 32 forks source link

flex layout not respected #125

Open abulka opened 3 years ago

abulka commented 3 years ago

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>

image

(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. image

Interestingly when you hit the Run with Js button in the demo of this problem, you initially see the correct flex layout image 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 commented 3 years ago

@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 commented 2 years ago

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

abulka commented 2 years ago

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