CODEWITHSUNDEEP
htmlcss
Frank Edgar
Frank Edgar

Reputation: 89

Variable horizontal sizing with generated divs

Need help with formatting this properly... So this webpage/application generates a small set of boxes that serves as a basic graph for trending resource usage.

The gHolder and graphContainer are fixed, and the graphBar classes are generated one per second up to a fixed number of bars (I only included a few for brevity) At the end of that there should be an overall percentage in a box (Also generated in Javascript)

Currently I can make this work if I have a fixed number of graphBar entries that are less then the smallest screen resolution I expect.

Id like to make this dynamically size... but unfortunately, when I try and make the container equal the size of the available area... It either leaves a great big empty area... or If I have more graphBar entries then it can display it wraps them rather than hiding the overflow.

I currently have it using the CSS Table functions which is I assume the problem... but I cannot seem to make this work any other way.

Image of the general shape:

CPU Graph

Basic HTML structure:

<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
</div>

Here is a jfiddle of the problem. PLease play with it and see if you can come up with a good way of doing things:

https://jsfiddle.net/84recnzg/

Upvotes: 0

Views: 45

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

You could achieve this just by changing the CSS styles from the JSFiddle that you provided. For example, some of the changes would be:

  • Adding some position: relative for the parent, and absolute for the boxes inside.
  • Setting a really large width for .graphContainer.
  • Setting the overflow to hidden for the parent.

.gHolder {
    height: 102px;
    border: 1px solid #555;
    position:relative;
    width:auto;
    overflow:hidden;    
}

.graphContainer {
    width: 100000px;
    height:0px;
    position:absolute;
    bottom:0px;
    right:100px;
    display: table-cell;
    vertical-align: bottom;
    border-right: 0px;
    cursor: pointer;
    margin-bottom: 16px;
    text-align: right;
    overflow: visible;
}

.graphInfo {
    width: 100px;
    position:absolute;
    top:0;
    right:0;
    display: table-cell;
    height: 102px;
    vertical-align: middle;
    border-left: 0px;
    background-color: #F00;
}
.graphBar {
    position: relative;
    width: 7px;
    display: inline-block;
    background-color: blue;
    margin-right: 0px;
}
<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:8px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:16px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:2px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:9px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:15px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphInfo">
    <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
  </div>
</div>

You can see this example on this JSFiddle: https://jsfiddle.net/84recnzg/2/, and you would still need to play with the rest of the styles to make them fit (e.g.: the text in the .graphInfo box).

But setting up a really large width has a problem: if you let it run sufficient time, the number of graph bars will be enough to overflow and you'll have the issue of the two lines.

One quick solution for that would be to set the width dynamically using JavaScript each time that you add a graph bar (width = number of bars * space of bar, where space of bar would be the width of the bar + its separation with the next bar).

Something like this (I used 11px for each bar):

document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 11) + "px";

That you can see in this JSFiddle: https://jsfiddle.net/84recnzg/3/

To fix the issue mentioned in the comments below:

  • Add a display:table and specify a width for the graph holder box
  • Remove the height and width for the graph container

function addBar() {
    
    // add a new bar with a random height
    aux = document.createElement("div");
    aux.className = "graphBar percent_low";
    aux.style.marginLeft = "4px";
    aux.style.height = Math.floor(Math.random()*99 + 1) + "px";
    document.getElementById("CPUHistoryGraph").appendChild(aux);
  
    // recalculate width for the graph area 
    document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 12) + "px";
}

// recalculate width for the graph area
document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 12) + "px";
.gHolder {
    height: 102px;
    border: 1px solid #555;
    position:relative;
    overflow:hidden;  
    display:table;
    width:100%;
}

.graphContainer {
    /*width:100000px;
    height:102;*/
    position:absolute;
    bottom:0;
    right:100px;
    display: table-cell;
    vertical-align: bottom;
    border-right: 0px;
    cursor: pointer;
    text-align: right;
    overflow: visible;
}

.graphInfo {
    width: 100px;
    position:absolute;
    top:0;
    right:0;
    display: table-cell;
    height: 102px;
    vertical-align: middle;
    border-left: 0px;
    background-color: #F00;
}
.graphBar {
    position: relative;
    width: 7px;
    display: inline-block;
    background-color: blue;
    margin-right: 0px;
}
<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:8px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:16px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:2px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:9px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:15px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphInfo">
    <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
  </div>
</div>

<button onclick="addBar();">Add bar</button>

You can also see it on this JSFiddle: https://jsfiddle.net/84recnzg/9/

For some reason, in the JSFiddle all the bars are displayed aligned to the bottom, but on the demo above some seem to be 1px off (not all, just some). It's a bit strange.

Upvotes: 1

Related Questions