Modifying Container Height After Initialization With Resize()

I have a HTML DOM that looks like:

<div id="my-element"></div>

with the corresponding code to initialize Cytoscape:

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.

After going through the docs, it seems like I should be able to do this with cy.resize().

I have the following bound to a button click action in my code:

$('#my-element').css('height', 'calc(100% - 410px)');
cy.resize();

But the above doesn’t redraw my Cytoscape container with the new height.

What am I missing here?

[ianhi]

I also found this slightly confusing. In particular I took this line from the documentation for resize(ref)

to have the graph resize and redraw itself

to mean that I should expect the pan and zoom to be modified to fit the graph inside the new dimensions when I called this function. This probably stems from my being newish to javascript and not fully understanding the distinction of viewport and pan and zoom you helpfully described.

@maxkfranz would you be open to adding something like the following to the documentation: This function will only change the viewport extent, it will not modify the pan and zoom to fit the graph inside the new dimensions. To accomplish that you will need to call cy.fit() after this function.

[pihish]

It had nothing to do with styling. cy.resize() needs to be followed by a call to cy.fit()

$('#my-element').css('height', 'calc(100% - 410px)');
cy.resize();
cy.fit();