Horizontal Output With Table

[biznet11]

Hi folks,

- Let's say that the results of a query were 15 items
- normally they would be listed vertically one at a time like:

item1
item2
item3
item4
item5
etc.

Q: I'm curious if there is a technique to list them a few different ways like:

- Horizontal with 3 columns like:

item1 - item2 - item3
item4 - item5 - item6
item7 - item8 - item9
etc...

or a mixture:


item1 - item6 - item11
item2 - item7 - item12
item3 - item8 - item13
item4 - item9 - item14
item5 - item10 - item15

[Kapitaine]

Well, you could use a mixture of CSS and some conditional logic in ColdFusion.

Make a DIV 300px wide. Then, make each item inside 100px wide. Float these items all left and voila! You now have the 3 items per row.

E.g:

<div style="width:300px; float: left; clear: both; background: yellow;">
<div style="width: 100px; float: left;">Item</div>
<div style="width: 100px; float: left;">Item</div>
<div style="width: 100px; float: left;">Item</div>
<div style="width: 100px; float: left;">Item</div>
<div style="width: 100px; float: left;">Item</div>
<div style="width: 100px; float: left;">Item</div>
</div>

For your next model...you could work out where to break the loop every fifth item e.g. after item 5, then, 10, then 15 etc using MOD in a CFIF tag. Google MOD for ColdFusion to find out more. You'd test this against the recordcount of the query or something...or perhaps even the index number if it's just a normal loop or list loop.

Good luck,
Mikey.

[biznet11]

Thanks Folks,

your ideas worked great!

[Astonished_protector15C3]

Hi,

I think you have to use the condtion with MOD to achive this

For Eg <cfif i mod 2>

[Oğuz Demirkapı]

MOD is enough for the first one.

You can use cfloop with step option for the second approach. :)

I generally like the CSS table ideas but having a fixed cells for these kind of outputs would be sometimes tricky and I do not prefer. 🙂

[biznet11]

Thanks again.

[straffenp]

Hi everyone. I'm working on something very similar. My data is being output into a table with two columns. CF is ordering the data alphabetically from left to right:

a b
c d
e f

Is there a way, possibly in my query, to switch the across output to down output?:

a d
b e
c f

Thanks for the help!

[Oğuz Demirkapı]

Something like that? :)

<cfscript>
myQuery = QueryNew("");
QueryAddColumn(myQuery,"name",ListToArray("a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"));
</cfscript>
<cfdump var="#myQuery#">

<!--- colcount: Total column number --->
<cfset colcount = 5>
<!--- stepcount: Calculated step number --->
<cfset stepcount = Round(myQuery.recordcount/colcount)>
<cfset myid = 1>
<cfdump var="#stepcount#">
<br />
<cfoutput>
<cfloop index="id" from="1" to="#stepcount#">
<cfloop index="secid" from="#myid#" to="#myQuery.recordcount#" step="#stepcount#">
#myQuery.name[secid]#
</cfloop>
<cfset myid = myid +1>
<br />
</cfloop>
</cfoutput>

[Oğuz Demirkapı]

Same thing with table would be ...

<cfoutput>
<table>
<cfloop index="id" from="1" to="#stepcount#">
<tr>
<cfloop index="secid" from="#myid#" to="#myQuery.recordcount#" step="#stepcount#">
<td>#myQuery.name[secid]#</td>
</cfloop>
<cfset myid = myid +1>
</tr>
</cfloop>
</table>
</cfoutput>