second row of products last item is wrapping.

[durangod]

Hi, i added two rows of products on my comparison. This is the first time i have ever had two rows.

 

I have the cols set at 33.3, i did try the original 20 and also 30 and same deal. So it is not a css problem i do not believe.

 

Typically when this happens on the first or second row it means there may be a miscode in the row change process. If the first two display correctly then all the others should as well, thats my experience.

 

Here is my css.. all the other css is standard issue.

 

The products tpl is also standard issue.

 

/*
Product Listing
*/

#order-comparison .currencychooser {
   float: right;
   margin: 0 20px 10px 0;
   padding: 5px 5px 5px 10px;
   background-color: #F8F7ED;
   border: 1px solid #F4E3A2;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   font-size: 12px;
   font-family: Verdana;
}

#order-comparison .currencychooser a {
   text-decoration: none;
   padding-right: 5px;
   color: #000;
}

#order-comparison .currencychooser a:hover {
   color: #0066CC;
}

#order-comparison .prodtablecol {
   float: left;
   width: 33.3%; /* was 20 - changes width of colums in package display on order menu - the more packages the small the colums */
   font-size: 14px;
   text-align: center; /* this controls the text in the product descriptions - this effects headers also so leave this alone and make a new one */
}


/* added by dave for description only text alignment */

#order-comparison .descprodtable {
   font-size: 14px;
   text-align: left;
}

/* end of my add */

 

 

Here is how it displays now.

 

XXX

XX

X

 

it should be

XXX

XXX

 

For some reason that last item on the second row is wrapping.

[durangod]

GOT IT whooohoooo...

 

yep it was in the code

 

in templates/orderforms/comparison/product.tpl

 

near the bottom you will see this line of code

 

{if !count($products.0.features) && ($num+1) % 5 == 0}<div class="clear"></div>

 

to explain what it is doing to cause this is that is is doing a class clear when it gets to 5 product items because num + 1 % 5 == 0 so i changed it to 6 and whalla problem fixed.

 

so it should be like this.

 

 

{if !count($products.0.features) && ($num+1) % 6 == 0}<div class="clear"></div>

 

 

that brings up a question, i wonder why they did it this way, you need to adjust this number by how many products you have on the page i guess which should not be.

 

Im not sure what the solution is, you need to have a variable there instead of a hard code i think because even if you made that 3 for every row of three it would still have to be adjusted if you reduced the col width to 14 and had 4 per row.

 

So i think that might need some redo somehow..

[durangod]

just fyi i also added this to seperate the rows

 

 

{if ($num +1) % 3 == 0}
   <center><img src="/images/seperator.jpg" border="0" alt="" /></center>
   {/if}