View Single Post
  #5  
Old April 24th, 2011, 07:02 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi Ryan

By default, all Datafeedr template views take product name and description into consideration on category pages where varying lengths of names and descriptions could potentially mess up the layout.

This is all done via CSS and specifically the overflow, line-height and height attributes. Here's an example:

HTML + CSS:

HTML Code:
<style type="text/css" title="text/css">
#box
{
	width: 200px;
	height: 300px;
	background-color: #6FC;
}

#box h3
{
	overflow: hidden;
	font-size: 14px;
	line-height: 1.2em;
	height: 2.4em; /* This MUST be a multiple of "line-height" */
}
</style>

<div id="box">
	<h3>
		This is a really long title which, 
		if not controlled by CSS, would 
		continue to wrap around for 3, 4 
		or possibly even 5 lines!
	</h3>
</div>
Output:



If we want to show 4 lines of the text, we modify the height attribute multiplying the "line-height" values by 4 (1.2 * 4 = 4.8). So we have height: 4.8em. Here's the output of that single code change.



Like I said, by default, all Datafeedr templates do this. You must have modified your product list modules or CSS code if this is not working. You will need to apply the same technique as above to your new code.

Eric