Cytoscape JS - Modifying Container Height After Initialization

Question

I initialize Cytoscape with something that looks like the following:

var cy = cytoscape({
    container: $('#my-element'),
    height: 500px
});

I would like to change the height of the container element to something other than the original 500px value when an user commits an action.

How would I do this with Cytoscape? There is a height() method in the main Cytoscape object, but this only functions as a getter.

Answer 1

There is a documented method cy.resize() that you can call to redraw the graph to fit within the context of the current container's height / width. You won't however get the desired results just by calling this method. You'll also have to call the cy.fit() function afterwards to get the new graph view you want.

So your function to resize the container should look something like this:

function resizeContainer(newContainerHeight){
    $('#my-element').css('height', newContainerHeight);
    cy.resize();
    cy.fit();
}