Making Two Columns (CSS Layout & Responsive Display)

[liberaliscomputing]

Since this application displays two kinds of visualisation, network representation and gamification, I divided the content container into two columns, using col-md-6. In so doing, the network visualisation will be placed on the left column while gamification components take the right side. To this end, I made following modifications in index.html and style.css respectively:

• index.html

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div id="cy"></div>
    </div>
    <div class="col-md-6">
    </div>
  </div>
</div>

• style.css

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

Finally, I got the following result (Issue #3 is not still resolved), which looks fine:

However, when I try it to be reponsive with, say, a display size of a smart device, it is not what I meant to be as follows:

I want to vertically postition network mapping and gamification when they are displayed on a small screen. Any practical tips, @thomaspark, @alanmoo? The app is live at http://meenchulkim.info/apps/network-mapping-js/

[mmmavis]

If you inspect the elements using dev tool the two <div> are actually stacked vertically on small screen. I think the problem might be position: fixed; and width: 50%; are set on #cy which make the wrapper look like it still takes half of the page width.

[alanmoo]

Also worth noting: position: fixed means that no matter how you scroll, that element will always be in that spot on the screen. I notice the canvas has a scrolling == zooming functionality, that might be causing some issues.

[mmmavis]

maybe try

#cy {
  width: 100%;
  height: 500px; // adjust the number to what you like it to be
}

Also you will need to add space to the top of your main content's container <div>. Otherwise it will overlap with the fixed nav bar at the top.

[thomaspark]

Along with @mmmavis's suggestion to set #cy to 100% width, you can make the two columns stack on mobile by adding col-xs-12 classes.

[alanmoo]

Ok, I've gotten a chance to take a look at this and a few things are going on:

As I first thought, #cy's position: fixed is causing its wrapper element to not trigger layout. Removing that and the width: 50% begins to get you closer to what you want. The top navigation still gets in the way, so you need to either make it not fixed in place or add a top margin to the content below it.

The biggest challenge with mobile though is going to be scrolling- as it seems a single touch on the graph drags it around inside the canvas. This is nice (and the 2 finger zoom working), but you may need to come up with a different UI than stacked content for mobile.

Do you have a specific comp you're trying to build this to or would it be helpful if I submitted a PR based on what I'd do to attempt to make this nicely responsive?

[liberaliscomputing]

@mmmavis: Thanks for the tip! I tackled the margin issue with margin: auto; and margin-top: whatever-value-i-like-to-use; also works! However, when I tinker with width with 100%, it shows like this even tough I have two columns:

The CSS is as follows:

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

In addition, when I use others than fixed for position , the visualization is gone! I am using cytoscape.js, and how this library renders looks quite different from d3.js. Shoul I change to d3.js?

@thomaspark: Thanks for your code mentoring always! adding col-xs-12 works as below:

@alanmoo: Thanks for keeping interested in this project! I also noticed this visualization has a scrolling == zooming functionality, and it might cause the layout issues that I faced. If you can submit a PR, that would be more than appreciated!