First, I found this solution (ColdFusion - Displaying rows as columns) which WOULD fix my problem if I could use table, but I can't since this needs to be responsive. However, the client didn't like the responsive tables. They really, really would prefer the columns be displayed so the user would only need to scroll up and down, and not up down and side to side.
I need some help converting the table to bootstrap <div>'s. I know the basics: skipping the table, tr equals div class="row" and td equals div class="col-sm-*" stuff. However, more specifically, I'm not sure on the logic to use to convert the SO solution above and how to apply it to my needs.
Using Lucee along side with Bootstrap v3, I'm trying to populate a "grid" but I need to populate the rows in column1 before populating column2.
1|10|20|30|40
2|11|21|31|41
3|12|22|32|42
4|13|23|33|43
The code snippet below is from @travis and I take no credit for it
<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">
<!--- loop through the rows. This loop will run 3 times in this example --->
<cfloop from = "1" to = "#totalRows#" index = "thisRow">
<tr>
<!--- this loop will run 5 times in times in this example --->
<cfloop from = "1" to = "#cols#" index = "thisCol">
<!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->
<td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
<!--- Check current record with the record count, this will be used to display data or an empty cell --->
<cfif output lte qMyQuery.recordCount>
<cfoutput>#qMyQuery.Mon[output]#</cfoutput>
<cfelse>
<!--- use <br> to display an empty cell --->
<br>
</cfif>
<!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
<cfset output = output + totalRows>
</td>
</cfloop>
<!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->
<cfset output = thisRow + 1>
</tr>
</cfloop>
</table>
and this is my attempt to accomplish the same thing using bootstrap:
<!-- what I'm working with -->
<cfset cols = 2>
<!-- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows-->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<div class="row">
<div class="col-sm-12">
<!--- loop through the rows. This loop will run 3 times in this example --->
<cfloop from = "1" to = "#totalRows#" index = "thisRow">
<div class="row">
<!--- this loop will run 5 times in this example --->
<cfloop from = "1" to = "#cols#" index = "thisCol">
<div class="col-xs-3" style="border:1px solid red">
<cfif output lte qMyQuery.recordCount>
<cfoutput>#qMyQuery.mon[output]#</cfoutput>
<cfelse>
<br>
</cfif>
<cfset output = output + totalRows>
</div>
</cfloop>
<cfset output = thisRow + 1>
</div>
</cfloop>
</div>
</div>
However, the output from my work simply displays everything in a single full-width page (the inline style of border:1px solid red is there to see what the code is producing). While this is for ColdFusion, the logic for the looping would be the same for PHP I presume.
Any tips, tricks, advice, or preferably solutions to this?
If I had more time, I'd probably do it differently since this is NOT pretty but it did satisfy the requirements and I've spent too much time on this already but most importantly, the client is good with this approach given the budget and time.
For this implementation, the list will never exceed 75 records, will 99% of the time be used on a tablet or larger device, and will be used by users to select checkboxes. There will also be a "select all" option but that is not included in this answer - that's a user story for later.
I'm running three queries (running one query and then a query of queries ), one collecting the first XX number of records, and second XX number of records, XX for the third set of records. I am passing in a variable for the QoQ which will determine how many rows will be displayed so that each column will have some data appear in it.
Then the output looks like this (sorry but I can never get the formatting quite right in SO):
` <div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-1">
<cfoutput query="colum1">
<label><input type="checkbox"> #id# #mon#</label><br/>
</cfoutput>
</div>
<div class="col-xs-3">
<cfoutput query="colum2">
<label><input type="checkbox"> #id# #mon#</label><br/>
</cfoutput>
</div>
<div class="col-xs-3">
<cfoutput query="colum3">
<label><input type="checkbox"> #id# #mon#</label><br/>
</cfoutput>
</div>
</div>
</div>`