Related Products

Hey, guys, I'm having a problem with the Short Description of my Related Products spilling into my footer. Could someone help me fix it? You can see the problem by scrolling to the bottom of this page. Thanks in advance!

I'm using Nop 4.0

http://technink.com/gildan-g500

Your short description looks like a full description. You should consider moving all those information to full description and keep the short description short and swift as the name suggests.
If you still want to keep all this information then
1)You can truncate your short description after a fixed number of characters that will fit in the box in the related product model preparation and show it on the related product block.
2)Or, you can use custom styling and set the max-height property if you plan to use such a longer short description.

@sanju.dahal741 Thanks for the reply.

I wanted the info displayed right beside the product and putting it in the short description gave me the desired result.

How do I truncate the number of characters so it will fit in the "related product" box?

[i][/i]You can do something like this in the PrepareProductOverviewModels
First, get the localized short description

 string shortDescription = _localizationService.GetLocalized(product, x => x.ShortDescription);

And then truncate it so that shortdescription on product overview contains only a fixed number of characters

model. ShortDescription = shortDescription?.Length > 197 ?
                        $"{shortDescription.Substring(0, 197)}..." : shortDescription

I have used 200 characters as the limit for the short description. You can extend it by pulling the value from the setting.

The code will truncate the short description to 197 characters followed by 3 dot, if the short description is longer than 197 characters

For some reason, I do not have PrepareProductOverviewModels in my Views>Product folder.

Could you walk me through how to set the height for the CSS?

It is a method that is in the ProductModelFactory.cs class inside Nop.Web==>Factories

Or, you can do this by css too.
Please follow this StackOverflow thread

tyebeach wrote:

Hi tyebeach,

if you just want some simple CSS code that you can use to limit the description of your product boxes, you can use the following:

.item-box .details {
    max-height: 170px;
    overflow: hidden;
}

This will show only two lines of your description (that is if you have only one line for the product name), since your product box is also limited to a certain height.

If you want to show more lines of the description text, you can use higher value for the max-height property, but make sure to make the product boxes higher accordingly. For example:

.item-box, .item-box.product-grid {
     height: 570px;
}
.item-box .details {
    max-height: 220px;
    overflow: hidden;
}

Hope this was helpful.

Best Regards,
Valentin.