force cfloop to display in columns left to right

hi all,

i've got a cfloop which currently displays the results in a list.

what i'd like is for the data to be displays left to right in three columns like so:

1 2 3
4 5 6
7 8 9

here is the CF code and the css.

<div class="productList">
			<cfloop array="#$.cart.productList().getPageRecords()#" index="local.product">
            <div class="productListEachProd">
				<a href="#local.product.getProductURL()#">
					<dl>
						<dt class="image">#local.product.getImage("s")#</dt>
						<dt class="title">#local.product.getTitle()#</dt>
						<dd class="price">#DollarFormat(local.product.getLivePrice())#</dd>
					</dl>
				</a>
             </div>
			</cfloop>
		</div>

Open in new window



and here is the current very basic css:


.productList {
	border: 1px #000000 solid;
	
	}
	
.productListEachProd {
	border: 2px #FF0000 solid;
	
	}

Open in new window


many thanks
LVL 1
bede123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

strickddCommented:
in a cfif statement check #(intValue MOD 3)# where "intValue" is a variable that is incremented every loop.

If the value is 0, add a line break.
0
bede123Author Commented:
many thanks but i'll need more help than that. i'm not experianced with writing cf. can your show me wha it woudl look like please?

would i wrap the entire cfif round the list? like so:



<cfif #(intValue MOD 3)# where....>


<div class="productList">
<cfloop array="#$.cart.productList().getPageRecords()#" index="local.product">
<div class="productListEachProd">
<a href="#local.product.getProductURL()#">
<dl>
<dt class="image">#local.product.getImage("s")#</dt>
<dt class="title">#local.product.getTitle()#</dt>
<dd class="price">#DollarFormat(local.product.getLivePrice())#</dd>
</dl>
</a>
</div>
</cfloop>
</div> 



</cfif>

Open in new window

0
strickddCommented:
No, the CFIF has to be inside the loop. Here is a similar sample to what you are trying, you just have to modify it to suit your needs: http://www.bennadel.com/blog/665-And-On-The-Seventh-Row-MOD-Created-1-And-It-Was-Good.htm
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

bede123Author Commented:
right, ive given this a stab - in the dark, pitch black in fact :-)

<div class="productList">
	<cfloop array="#$.slatwall.productList().getPageRecords()#" index="local.product">
            	<cfif (#local.product# MOD 3) eq 0>
            <br/> 
            	<cfelse>     
            <div class="productListEachProd">
				
<dl>
<dt class="image"><a href="#local.product.getProductURL()#">#local.product.getImage("s")#</a></dt>
<dt class="title">#local.product.getProductName()# </dt>
<dd class="price">#DollarFormat(local.product.getLivePrice())#</dd>
<dt class="more"><a href="#local.product.getProductURL()#">More Info &gt;&gt;</a></dt>
</dl>
				
             </div>
             	</cfif>
	</cfloop>
		</div>

Open in new window



but there is clearly soemthing wrong with my format. can you have a look please?

0
strickddCommented:
You're getting there... there are two problems. First, you are checking "#local.product# mod 3" which is not an integer counter. You need to add a variable that increments each loop and check that or check the row number of the current product.

The next problem is that you have the code to print product information happening on all rows that are not multiples of three so your output would be like this:

12
45
..

instead of
123
456
...

If the MOD statement is true, you want to brint the <br/> as well as the product info.
0
_agx_Commented:
@strickdd's right. Using MOD to add a line break will do the trick.  

     
<cfif (#local.product# MOD 3) eq 0>
            <br/>
    <cfelse>    
       ... code to generate <dl> list
    </cfif>

But that will skipevery 3rd <dl> list. You need to create the <dl> list every time, but add the line break at the end IF it's the 3rd row:

        
<cfloop array="#$.slatwall.productList().getPageRecords()#" index="local.product">

    ... your code to generate the <dl> ...

    <!--- if we've displayed 3 elements it's time to add a line break --->
    <cfif (local.product MOD 3) eq 0>
       <br/> 
    </cfif>

</cfloop>

Open in new window

       

<div class="productListEachProd">

The other potential problem is <div>'s always generate a line break.  So even with the code above, the output won't be in columns unless you use something like float to suppress the automatic line break. Example:

<style>
 .productListEachProd { width: 33%; float: left; }
</style>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
_agx_Commented:
Oops, took too long.

> you are checking "#local.product# mod 3" which is not an integer

Good catch.  I missed that it was an array loop, not a from/to loop.
0
bede123Author Commented:
ok thanks very much both of you.

i'm understanding (a little bit) and ive inserted the cfif into the correct position.

however now you've got me on:

>You need to add a variable that increments each loop and check that or check the row number of the current product

i just dont know where to begin with that.
0
_agx_Commented:
All that means is create a simple counter.

       <cfset counter = 1>

Each time you loop, increment the counter by 1.

     <cfloop ...>
           ....
          <cfset counter = counter + 1>
     </cfloop>

      > you are checking "#local.product# mod 3"

Then check the #counter# variable instead of #local.product#

0
bede123Author Commented:
ok great, i'm getting somewhere.

the error i'm getting is:

The value coldfusion.orm.PersistentTemplateProxy cannot be converted to a number.

using this code:

<cfset counter = 1>

<div class="productList">
                  <cfloop array="#$.slatwall.productList().getPageRecords()#" index="local.product">
                      
            <div class="productListEachProd">
                        
                              <dl>
                                    <dt class="image"><a href="#local.product.getProductURL()#">#local.product.getImage("s")#</a></dt>
                                    <dt class="title">#local.product.getProductName()# </dt>
                                    <dd class="price">#DollarFormat(local.product.getLivePrice())#</dd>
                        <dt class="more"><a href="#local.product.getProductURL()#">More Info &gt;&gt;</a></dt>
                              </dl>
                        
             </div>
            <cfset counter = counter +1>
                    <!--- if we've displayed 3 elements it's time to add a line break --->
    <cfif (counter MOD 3) eq 0>
       <br/>
    </cfif>


                  </cfloop>
            </div>


so this just probably means i havent enclosed something correctly or something simple like that. ive tried a few variations of things. can you see whats wrong?

0
_agx_Commented:
Nothing jumps out at me.  What's the line number of the error?  

> <cfset counter = counter +1>

No, you have to increment the counter after the MOD test. Otherwise it'll be off by 1

first loop        : counter == 2
second loop   : counter == 3     ... insert line break too early
third loop       : counter == 4
...
0
bede123Author Commented:
yey, got it to work with:

<cfset counter = 1>
            <div class="productList">
                  <cfloop array="#$.slatwall.productList().getPageRecords()#" index="local.product">
                      
            <div class="productListEachProd">
                        
                              <dl>
                                    <dt class="image"><a href="#local.product.getProductURL()#">#local.product.getImage("s")#</a></dt>
                                    <dt class="title">#local.product.getProductName()# </dt>
                                    <dd class="price">#DollarFormat(local.product.getLivePrice())#</dd>
                        <dt class="more"><a href="#local.product.getProductURL()#">More Info &gt;&gt;</a></dt>
                              </dl>
                        
             </div>
           
                    <!--- if we've displayed 3 elements it's time to add a line break --->
    <cfif (counter MOD 3) eq 0>
       <br/>
    </cfif>
<cfset counter = counter +1>

                  </cfloop>
            </div>
       


just needs to tidy it up a bit and we're all sorted.

thanks very much for your help guys.
0
bede123Author Commented:
oh but wait, i just added a 4th product to the db but only 3 are displaying. do you think that might be related to my code or something else?

0
_agx_Commented:
Definitely something else.  Maybe ORM related.
0
bede123Author Commented:
ok thats cool. at least i know to look somewhere else and not go touching the code we've just done. thanks again.

hopefully your guys agree a 50/50 split.

many thanks

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.