在Twitter Boostrap选项卡中使用Cytoscape渲染 [英] Using Cytoscape rendering inside twitter boostrap tabs

问题描述

我在twitter bootstrap 3个选项卡中使用了两个cytoscape图（每个选项卡一个图）。

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

我的麻烦是，当我选择隐藏时，只有活动选项卡是渲染器选项卡上它的图形不会被渲染（如果我在firefox上打开/关闭萤火虫（使用F12），则会显示图形）。

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();
});

没有成功。

图形为

谢谢

尼古拉斯

推荐答案

您要么需要修复Bootstrap，以便它不使用破坏尺寸的隐藏样式（即，不要使用显示：无等），也可以使用 cy.resize（） 。

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元素无法查询尺寸。

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

（2）浏览器没有事件或机制来检测DOM元素上的CSS /尺寸更改。解决方法的费用过高。

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

这篇关于在Twitter Boostrap选项卡中使用Cytoscape渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！