Cytoscape.js Visualization (CSS Layout)

[liberaliscomputing]

The application is using Cytoscape.js for the scalable visualization of networks. The attached image is a prototype interface of the application, and I wonder how the network can be vertically centered. I also want to make unconnected users positioned around the network not in grid as below.

[liberaliscomputing]

I temporarily remedied it by inserting "top: 10%" into the custom CSS. It works fine, but I am sure if it would be always responsive in a variety of settings (different size of display, mobile access, etc.).

[Pomax]

It doesn't look like it's generating regular SVG - do you know how it does its rendering? We might be able to do a relatively simple "find outer container for main graph, center that entire container".

[liberaliscomputing]

The original CSS layout for the first screenshot was as follows:

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0px;
}

As addressed above, I temporarily remedied this issue by changing top: 0%; to top: 10% to make some space from top. However, it may not be a reponsive way, so I used the following setup:

#cy {
  width: 100%;
  height: 100%;
  position: fixed;
  margin: auto;
  left: 0px;
}

, which makes the visualization go back to the way it was like the screen shot. Any idea would be really appreciated, @thomaspark, @alanmoo!

[alanmoo]

At what demo url are you looking for this behavior? I see the layout of #4, but not this.

[thomaspark]

How about removing the position properties on #cy and adding:

.container {
  margin-top: 65px;
}

On a side note, looks like you may want to re-render the graph on window resize.

[alanmoo]

I'm confused as to what you're looking for here, when considering #4. Do you want the visualization to be centered in the left column, once it's 2 columns? I'd be interested in getting a better idea of what you want this to look like overall in various conditions, as it's hard to solve CSS for state A and not affect state B.

[liberaliscomputing]

Thanks, guys! This version of visualization is now deprecated, so I will keep continuing discussing this layout issue at #4.