Using Cytoscape rendering inside twitter boostrap tabs

问题

I am using two cytoscape graphs inside twitter bootstrap 3 tabs (one graph per tab).

My trouble is that only active tab is renderer, when I select hidden tab it's graph is not rendered (the graph is rendered if I open / close firebug (with F12) on firefox).

I tried to solve this by :

$('#view-target').cytoscape({
...
ready: function(){
window.cytoscapeTarget = this;
}
});


$('#show-target').on('shown.bs.tab', function (e) {
window.cytoscapeTarget.forceRender();
});

Without success.

The graph is loaded but not rendered, does it come from cytoscape or twitter bootstrap ?

Thanks

Nicolas

回答1:

You either need to fix Bootstrap so it doesn't use a dimension breaking hide style (i.e. don't use display: none etc) or you can force Cy.js to recalculate the dimensions available using cy.resize().

Note that this caused by limitations in your browser:

(1) DOM elements with certain hidden styles can not have dimensions queried.

(2) The browser has no event or mechanism for detecting CSS/dimension changes on a DOM element. Workarounds for this are prohibitively expensive.

回答2:

The answer by maxkfranz is good, but it lacks actual solution for the problem. Also, it is not true that browser has no mechanism for detecting CSS changes - you can use DOMAttrModified or Mutation Observers (which are handled by most browsers now and make DOMAttrModified obsolete).

Here's my code - I assume that you have your cytoscape.js container inside Bootstrap's tab #cyTab and using standard cytoscape variable cy:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {        
    if(mutation.oldValue == "tab-pane fade" && mutation.target.className == "tab-pane fade active in") {
        console.log('REDRAW!');
        cy.resize();
        cy.layout({name: 'dagre'}); //optional - recalculate whatever layout you wish
    }
  });    
});
var targetNode = $('#cyTab')[0];
var observerConfig = {  
    attributes: true,
    childList: false,
    characterData: false,
    attributeOldValue: true, 
    'attributeFilter': ['class']};
observer.observe(targetNode, observerConfig);

You can read more about Mutation Observers here

回答3:

I have the same rendering issue inside Bootstrap modal also, and the approved answer fixed this issue, I have used

cy.resize()

inside

'shown.bs.modal'

event and it works nicely.

来源：https://stackoverflow.com/questions/25916735/using-cytoscape-rendering-inside-twitter-boostrap-tabs

标签

twitter-bootstrap

cytoscape.js