Cytoscape Navigator instantiates at the bottom of the DOM in Angular 2+

[CPolarisAlpha]

Cytoscape Navigator instantiates at the bottom of the DOM in Angular 2+, instead of being a child of the parent container/div.

[benjaminknust]

Not sure if you're still stuck on this, in case anyone comes across this I was able to get around this through the following combination of HTML / CSS / JS. "cytoDiv" represents the div the cytoscape graph is in and "cytoDivOverlay" is the container the navigator extension is in.

HTML:

<div id="cytoDiv">
        <div id="cytoDivOverlay"></div>
    </div>

CSS:

#cytoDiv {
    height: 100%;
    width: 100%;
    z-index: 0;
    position: relative;
    border: 1px solid gray; /* optional styling */
  }

  #cytoDivOverlay {
    min-height: 35%; /* optional styling */
    min-width: 35%; /* optional styling */
    bottom: 0;
    right: 0;
    position: absolute;
    overflow: hidden;
    z-index: 999999;
    background: #EEF4FA; /* optional styling */
  }

  .cytoscape-navigatorView {
    background-color: rgba(0, 0, 0, 0.1); /* optional styling */
    cursor: move; /* optional styling */
  }

  .cytoscape-navigatorOverlay {
    border: 1px solid gray; /* optional styling */
    height: 100%;
    width: 100%;
    position: absolute;
  }

JS / TS files when instantiating the "navigator" extension on the cytoscape graph: this.cy.navigator({ container: document.getElementById('cytoDivOverlay') }); // Initiate the navigator on the cytoDivOVerlay so that it is positioned accordingly

Note: I did encounter an issue with the aspect ratio when the natural height/width of the generated svg was not an exact square since the container has a 35% height and width in the CSS above. I was able to fix it by adding the following code right before the $img.css... section in the render function in the _updateThumbnailImage function. I am going to submit a PR for this a little later and see what Max thinks.

// Set the image height/width to the container height/width to preserve aspect ratio within its bounds
      if( that.options.fitToContainer === true ){
        img.width = Math.min(w, img.naturalWidth);
        img.height = Math.min(h, img.naturalHeight);
      }

[adamdva]

This fixed my display issue, but still had an issue with the img (png) size that was not fixed by your comment. The resultant png would be too large, so the view would not properly show the entire graph. I fixed it my adding the maxWidth and maxHeight options like;

var png = that.cy.png({ full: true, scale: zoom, maxHeight: h, // <-- maxWidth: w // <-- });