Khoi Boo Khoi Boo - 1 month ago 18
CSS Question

Put a Cytoscape graph inside a Bootstrap column

I have 4 Bootstrap columns: col-lg-1, col-lg-1, col-lg-4 and col-lg-6 (from left to right).

In the biggest column (col-lg-6), I would like to have a Cytoscape graph. Currently my Cytoscape style is the following (in the section):

<style type="text/css">
#cy {
height: 80%;
width: 50%;
position: absolute;
left: 40%;
top: 20%;
background:red;
}
</style>


Then in the body section, I have my leftmost column:

<div id="cy" class="col-lg-6" style="background-color:grey;">
Some text

</div>


Finally, I have my script also in the body section of the HTML document:

<script type="text/javascript">
$( document ).ready(function() {

var cy = cytoscape({
container: document.getElementById('cy'),
.....
});

});

</script>


The problem now is that Cytoscape graph (and the leftmost column) doesn't stack below other columns when the browser resizes (as expected in a Bootstrap behavior).

Can you please show me a somehow detailed solution for this, I do appreciate your expertise very much.

Answer

First of all include the the Cytoscape graph section inside the col-lg-6

Get rid of position: absolute just set the height: 100%

Check the working demo here

Sample structure:

<!-- container-fluid : start -->
<div class="container-fluid">
  <row>
    <div class="col-sm-6">

       <----Include other stuff here----->

    </div>
    <div class="col-sm-6">

      <!-- graph : start -->
      <div class="panel panel-primary">
        <div class="panel-heading">Graph</div>
        <div class="panel-body">
          <div id="cy-container">
            <div id="cy"></div>
          </div>

        </div>
      </div>
      <!-- graph : end -->

    </div>


  </row>
</div>
Comments