dynamically adding div's as columns in a row with Zurb Foundation

Question

I am trying to dynamically add div's (which will be the target for jqplot graphs) to a tab panel using Foundation 6. I want the divs to be in a column layout in the row. I can get the divs in a row but each div ends up being in a row by itself instead of being a column element in the row.

I want this layout: Layout I want

I have been using the code below to create the row div in the "graph1" panel:

var dynDivR1 = document.createElement("div");
dynDivR1.id = ("dynRow1");
dynDivR1.class = "row"; 
document.getElementById("graph1").appendChild(dynDivR1);

I then go into a loop to create the actual images (get the data, create the jqplot graph). Within the loop I create the graph div using the code below:

    var dynDiv2 = document.createElement("div");
dynDiv2.id = ("dynDiv2" + divno2);
dynDiv2.class = "small-7 medium-3 large-3 columns";
dynDiv2.style.height = "200px";
dynDiv2.style.width = "200px";     
dynDiv2.style.backgroundColor = 'white';
document.getElementById("dynRow1").appendChild(dynDiv2);

var plotInDiv2 = simplePlot(dynDiv2.id, lineDat2, sensorNames);
    divno2 +=1;

simplePlot is a function that creates the graph using jqplot. This code works in the sense that divs are dynamically created, the graphs are placed in them. The problem I have is the layout: because I will have many graphs I want them in columns going across the page, not rows down the page (I will eventually have to have rows and columns but for now I am just trying to solve the column problem).

I tried removing the column width and height attributes in the image div but that also did not work (just got full width images / divs).

When I look at the resulting HTML the div's I have created do not seem to contain the class information. So for example the dynRow1 div looks like this (see actual HTML below):

<div id="dynRow1">

It does not have class = row attribute. When I look at the div (console.log) immediately after creation the class = row is there.

I tried inserting an additional column class div in the row like this (and then attach the plot div to that) but it did not work:

<div class="medium-6 columns">

I am stuck and would greatly appreciate any suggestions or pointers others can give.

Thank you very much.

Added 26/12/16 This is the HTML I am getting (I have not included the closing tags - they are there, the page loads and works without error in Firebug:

<div class="tabs-content" data-tabs-content="dy-tabs-2">
<div id="data1" class="tabs-panel" role="tabpanel" aria-hidden="true" aria-labelledby="data1-label">
<div id="graph1" class="tabs-panel is-active" role="tabpanel" aria-hidden="false" aria-labelledby="graph1-label">
<div id="dynRow1">
<div id="dynDiv21" class="jqplot-target" style="height: 200px; width: 200px; background-color: white; position: relative;">
<div id="dynDiv22" class="jqplot-target" style="height: 200px; width: 200px; background-color: white; position: relative;">

Then this is a clip of the screen shot of the resulting HTML Clipped screen shot from HTML page

Thanks Again

Answer 1

Thanks to Chris O for the useful suggestions. I have used Chris's suggestions as a basis for the following solution which works.

function staticPlots (selectDataSet) {
/* Function to create row and column div's for each variable in SelectDataSet and then plot
the data for each variable using jqplot line graph.
Temporary data in dataToPlot.
Temporary list of variables in selectVar
*/

// Temporary selection of variables to plot
selectVar = ["R1_","R2_","R3_","R4_","C1_","C2_","C3_","C4_","C5_","C6_","C7_","C8_","C9_","C10_","C11_","C12_"];

/* Create divs and place plots in them
First calculate the number of rows needed with four plots per row
lx is iterator to set unique col ids
*/

var x = selectVar.length;
var y = 4;
var z = Math.ceil(x / y); 
var lx = 0;

for(var r=1; r<=z; r++) {
    var dv = createRowColDivs();
    dv.id = ("newRow"+r);
    dv.classList.add("row");
    document.getElementById("graph1").appendChild(dv);

    var newCol;
    for(var i=1; i<=4; i++) {
        newCol = document.createElement("div");
        newCol.classList.add("small-3");
        newCol.classList.add("columns");
        newCol.id = "col"+lx; 
        dv.appendChild(newCol);
        var names = selectVar[lx];

        // Temporary data for illustration so the database is not used
        dataToPlot = [[1,4,5,6,8,2,3],[2,8,7,6,3,2,3]];
        var plotInDiv2 = simplePlot(newCol.id, dataToPlot, names);
        lx ++;
    }
}
};

The createRowColDivs function just creates the row div so I can use it in other processes. Could easily have kept those processes in staticPlots function.

function createRowColDivs() {

  // create a new ROW div  
  var dv = document.createElement("div");
  dv.id = ("newDiv");
  dv.classList.add("row");
  return(dv);
};

This code gives me the row by column plot layout I was after.

Thanks Chris for the snippet that saw me on my way. One thing I had to change in your code was attaching the row div before I defined the col divs. it also took me way too long to figure out I needed to use lx to create unique id's for each plot.

Always appreciate suggestions for improving the code if anyone cares to.

Answer 2

Adding a row is <div class='row'> you have <div class='column row'>.

Using both column and row in the class creates a div that is a row 12 columns wide. Any new div columns you add will go to a new row.

Also, you will need to add the width (in grid blocks) that you want for your columns (up to 12 per row).

<div class='small-7 medium-3 large-3 columns'>

This code shows a column div that will be 7 grid spaces on small screen, 3 on medium and 3 on large.

Adding a new div should go as follows... (notice classList.add("row")):

  // create a new ROW div  
  var dv = document.createElement("div");
  dv.id = ("newDiv");
  dv.classList.add("row");

Here is a codepen example of adding all the content to create a row with several columns and utilizing the foundation classes: https://codepen.io/cmodesign/pen/woEpEd

http://foundation.zurb.com/sites/docs/grid.html

Answer 3

Dear please check the snippet, i have added display:inline-block to your generated div, is this what you need ?

<div class="tabs-content" data-tabs-content="dy-tabs-2">
  <div id="data1" class="tabs-panel" role="tabpanel" aria-hidden="true" aria-labelledby="data1-label">
    <div id="graph1" class="tabs-panel is-active" role="tabpanel" aria-hidden="false" aria-labelledby="graph1-label">
      <div id="dynRow1">
        <div id="dynDiv21" class="jqplot-target" style="height: 200px; display:inline-block; width: 200px; background-color: orange; position: relative;"></div>
        <div id="dynDiv22" class="jqplot-target" style="height: 200px; display:inline-block; width: 200px; background-color: black; position: relative;"></div>
      </div>
    </div>
  </div>
</div>