title: Cytoscape : Graph is not displayed when page is loaded
body: <p>I have incorporated a cytoscape graph into a div which has an initial status of <code>{display:none}</code>. </p>
  
  <p>When the div is shown <code>($('div#id').show())</code>, the graph is not displayed unless the user resizes the browser window. </p>
  
  <p>I looked into the css with the js console, and realized the initial css of the canvas is such that : <code>width: 0px; height: 0px</code>. </p>
  
  <p>It is only when the browser window is resized that the canvas inherits #cy's width and height:  </p>
  
  <p>Initial CSS status : </p>
  
  <pre><code>&lt;div id="cy"&gt;
      &lt;div style="position: absolute; z-index: 0; overflow: hidden; width: 0px; height: 0px;"&gt;**&lt;canvas data-id="layer0-selectbox" width="0" height="0" style="position: absolute; z-index: 5; width: 0px; height: 0px;"&gt;&lt;/canvas&gt;...
  </code></pre>
  
  <p></p>
  
  <p>CSS status when browser window is resized: </p>
  
  <pre><code> &lt;div id="cy"&gt;&lt;div style="position: absolute; z-index: 0; overflow: hidden; width: 560px; height: 420px;"&gt;&lt;canvas data-id="layer0-selectbox" width="560" height="420" style="position: absolute; z-index: 5; **width: 560px; height: 420px;"**&gt;...
  </code></pre>
  
  <p></p>
  
  <p>Any idea why this happens? Could you help me to fix this? </p>