CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapcytoscape.js
StephJ
StephJ

Reputation: 33

Responsive Bootstrap/Cytoscape integration

I am currently trying to do a SPA in bootstrap with a top nav menu and 3 rows in the body.

Ideally I would like to be able to switch smoothly (manually editting the code, not dynamically in the browser) each of the row in the code.
Despite all my efforts, so far I was able to integrate well the cytoscape view with top menu and first row, but the third row overlaps the cytoscape content and each time I am modifying the bootstrap classes on the div containing the cytoscape view, the cytoscape content is messed up.
I know there are some conflicts between the style #cy in the stylesheet and some of the arguments passed to cytoscape() contructor, but despite all my attempts I could not get rid of the position:fixed in the css, otherwise the cytoscape viewport just doesn't display.

I am a newbie in js and css, so I might miss something obvious and I take any other advices on other parts of the code.

Here is the html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap core CSS -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Datatbles CSS -->
    <link href="./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="./css/bomqchecker.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="index.html">
          <img src="images/logo_White_.png" width="120" height="30" class="d-inline-block align-top mr-3" alt="">BOM Q Checker</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <input id="file-input" class="btn btn-primary" type="file" accept="text/comma-separated-values">                                
          </ul>
        </div>
      </nav>
    </header>
    <main role="main" class="container">
      <div class="row starter-template">
        <h1>Rd Inputs</h1>
        <p class="lead">Please fill in the inputs</p>
        <table id="rdinputtable" class="table table-striped table-bordered" style="width:100%"></table>
        <form>
            <button type="button" class="btn btn-primary" id="rdCompute">Rd Compute</button>

        </form>
      </div>        
      <!-- graph : start -->
      <div class="row">
        <div id="cy"></div>
      </div>        
    <!-- graph : end -->
    <div class="row starter-template">
      <button type="button" class="btn btn-primary" id="rdCompute">Wrongly positioned button</button>
    </div>             
    </main><!-- /.container -->
  <script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="./node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  <script src="./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="./node_modules/cytoscape/dist/cytoscape.min.js"></script>
  <script src="./js/bomqchecker.js"></script>
  </body>
</html>

The CSS:

body {
  padding-top: 5rem;
}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

.bg-dark {
  background-color: #00205b!important;
}

.btn-primary {
  color: #fff;
  background-color: #005587;
  border-color: #005587;
}

#cy {
  width:80%;
  height:50%;
  border: solid;
  border-width: 1;
  position: fixed;
}

The javascript:

function initialize() {
    let cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [
          { data: { id: 'a' } },
          { data: { id: 'b' } },
          {
            data: {
              id: 'ab',
              source: 'a',
              target: 'b'
            }
          }],
          style: [{
            selector: 'node',
            style: {
              'width': 600,
              'height': 600,
              'content': 'data(text)',
              'text-valign': 'center',
              'color': 'white',
              'text-outline-width': 2,
              'text-outline-color': '#222'
            }
          }
        ]
      });

    console.log("initialize");
}

initialize();

Many thanks for your help,

Upvotes: 1

Views: 329

Answers (1)

StephJ
StephJ

Reputation: 33

I was finally able to make it work myself thanks to two other contributions in Stackoveflow:

  • 1st, instanciate cy only when the document is ready: ''' document.addEventListener("DOMContentLoaded", initialize()); '''
  • 2nd, got inspired by https://codepen.io/jpI/pen/BLELGW as a working example, notice the resize() call in the js which are instrumental (although window.resize() seems deprecated, it is working and currenlty the best I could figure out) .

Upvotes: 1

Related Questions