How do I constrain column width on the compare popup page?

Question

http://election.perumiaminews.com

My attributes are fairly long so when you click the compare button, the column with the attributes is super wide.

The other columns have a max width so the text flows depending on window size.

I'd like to be able to fix the width of the column the attributes are listed in or set it to at least display everything in equally wide columns.

Can someone help with how to do that?

Looking through this some more, I see the class nobr is being applied to each element in the attribute column. I imagine removing this would allow it to wrap like everything else but I don't see where that class is being applied.

...

I found the nobr class applied in list.phtml but removing had no effect.

<?php if($_i++%10==0): ?>
                    <th><span class="nobr"><?php echo $_attribute->getStoreLabel() ?></span></th>
                <?php endif; ?>

...

Ok, I found the below code in styles.css

background: #f4f4f4;


 text-transform: uppercase;

font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; line-height: 1.4; white-space: nowrap;

Removing the nowrap took care of the issue in both the popup and the additional information on the product page. But it's a global change rather than strictly for the compare popup. I think it's going to be ok but I would much rather be able to do this just for attributes and just on the product page and the compare popup.

Answer 1

If you want it to truly be only on the Compare pop up you can add a class to the template file. If this file is not in app/design/frontend/YOUR_PACKAGE/YOUR_THEME/ you will need to copy it to YOUR_PACKAGE/YOUR_THEME maintaining the same folder structure.

app/design/frontend/base/default/catalog/product/compare/list.phtml

The variable could use a counter like such:

<?php $coutner=1; ?>
<th class="column<?php echo $counter; ?>">
...magento code calling product attribute...
</th>
<?php $counter++; ?>

then you can target the specific table class and column number in CSS.

.compare-table .column1 { white-space: normal; }

---

The other option you have is to use the class names that each Magento page has by default and apply the fix via CSS. However, this will effect all sections of the compare pop up.

.catalog-product-compare-index .data-table span.nobr {
white-space: normal;
}