How to display more than 4 products/plans in the Comparison Order Template?

[visualtron]

I'm trying the new Comparison order template (http://docs.whmcs.com/Standard_Order_Form_Templates#Comparison) and if I add a 5th product, it doesn't display properly. I've spent hours messing with the CSS but to no avail. Has anyone faced a similar issue?

 

Here's the site - http://goo.gl/dwbUV (please scroll down to see the 5th product).

 

Thank you.

[Damo]

The width of each column is 18% so they'll not all fit (as you're seeing). Try something like...

 

#order-comparison .prodtablecol {

float: left;

width: 100px;

font-size: 14px;

text-align: center;

}

 

(or an equiv % for the width)

 

Your product titles are also quite long so you'll need to adjust the .aheader and .bheader values accorindgly.

[visualtron]

Hi Damo, thanks for helping.

 

I've done that previously, but couldn't get description to display property, so I tried to stretch the container width by changing the portal template css, but as you can see from the link again, the section on the bottom left is out of place.

 

Original:

 

#content_container{background:#FFF url(images/content_container_bg.gif) repeat-y;border:5px solid #258;color:#666;margin:20px auto 0;padding:0;text-align:left;width:950px;}

#content_left{background-color:#FFF;float:left;margin:0;padding:15px;text-align:left;width:670px;}

 

Change to:

 

#content_container{background:#FFF url(images/content_container_bg.gif) repeat-y;border:5px solid #258;col

or:#666;margin:20px auto 0;padding:0;text-align:left;width:1050px;}

#content_left{background-color:#FFF;float:left;margin:0;padding:15px;text-align:left;width:770px;}

 

 

 

The width of each column is 18% so they'll not all fit (as you're seeing). Try something like...

 

#order-comparison .prodtablecol {

float: left;

width: 100px;

font-size: 14px;

text-align: center;

}

 

(or an equiv % for the width)

 

Your product titles are also quite long so you'll need to adjust the .aheader and .bheader values accorindgly.

[Damo]

Changing the container will not achieve what you want (as you've demonstrated). I'm not able to look at this from the connection I'm on but will take another look when I can.

 

If you're not already, try using Chrome to view your changes on-the-fly with the CSS inspector.

[visualtron]

Changing the container will not achieve what you want (as you've demonstrated). I'm not able to look at this from the connection I'm on but will take another look when I can.

 

If you're not already, try using Chrome to view your changes on-the-fly with the CSS inspector.

 

 

please check again, I've fixed the page. thanks.

[gnappo]

Hi clickanddeploy i see your website can u tell me how i can add the descritption column on the left?

i have 4 products comparison but i have not understand how to add description column.

I see your site and i'm adding code to style.css and products.tpl, can you suggest how exactly?

 

thx

[And then there was one les]

If you want to display 5 columns on that page your going to have to lose the right sidebar and make the container for it wider, this will allow you to create the wider columns you need.

 

Secondly for some reason that 4th column does not display correctly the description box height needs increasing to allow the rows to line up.

 

Style.css line 498 add height: 120px that will sort the description box issue (chromium browser), actually scrap that, you need to find a way to get another class applied only to the description boxes and apply that height to that class. the way i provided here is affecting more than just your description boxes as you will see if you try it in chromes inspector.

Edited July 29, 2013 by CDJ Hosting

[And then there was one les]

Hi clickanddeploy i see your website can u tell me how i can add the descritption column on the left?

i have 4 products comparison but i have not understand how to add description column.

I see your site and i'm adding code to style.css and products.tpl, can you suggest how exactly?

 

thx

 

The description column works off the product description in the comparison template.

 

Setup the comparison description like this

 

 

Write a product description as per nomal you will then need to make your feature list

feature:value

Feature:value

etc:value

 

each description the the product group will need to have the same feature names so just copy and paste your first product description and edit the values as needed and leave the feature names intact

[visualtron]

If you want to display 5 columns on that page your going to have to lose the right sidebar and make the container for it wider, this will allow you to create the wider columns you need.

 

Secondly for some reason that 4th column does not display correctly the description box height needs increasing to allow the rows to line up.

 

Style.css line 498 add height: 120px that will sort the description box issue (chromium browser), actually scrap that, you need to find a way to get another class applied only to the description boxes and apply that height to that class. the way i provided here is affecting more than just your description boxes as you will see if you try it in chromes inspector.

 

 

Hi CDJ thanks for replying. I've managed to get it fixed here - http://forum.whmcs.com/showthread.php?71678-Template-alignment-issue

[visualtron]

Hi clickanddeploy i see your website can u tell me how i can add the descritption column on the left?

i have 4 products comparison but i have not understand how to add description column.

I see your site and i'm adding code to style.css and products.tpl, can you suggest how exactly?

 

thx

 

 

I've lost track of the changes made to CSS but for description column, it's stored in the db as CDJ mentioned. Here's an example for my case:

 

Send Unicode & Long/Concatenated SMS:✔<br><br>

 

It's necessary to add <br> to make the row height the same for all columns. It's really a pain as I had to randomly estimate the number of <br> required for each row - I don't know if there's a quicker or automatic way.

 

For productivity, I used an Excel spreadsheet, so the first column will be the feature description, the second column contains the tick and the third the <br>. It's easier to copy and paste entire columns using Excel. When I need to copy to the backend, I just remove the tabs generated by Excel using notepad search and replace.