Limit the amount of text that appears in ProductBox1

ProProductBox1  has limited space for the product short description before the descriptive text obscures behind the details / add to cart button (and eventually out of the box )

as a work around, in the stylesheet, i set   min-height  +  max-height    to give a little leeway and it works but it's not the right way to go about it.

so,

I'm trying to limit the amount of characters which are displayed in ProductBox1 in the short description (no set amount in mind, but for arguments sake, lets say 200.   If there were more characters, the box would display "..." after it reached the set limit  )

something here? :

lShortDescription.Text = product.ShortDescription;

if
{
product.ShortDescription >200 characters, display 200 characters + " ..."
}

You can control the overflowing text in the ProductBox1 description with CSS. You can use "overflow: auto;" or "overflow: hidden;" which will add scroll bars to the description box if needed or hide the overflowing text in the description box respectively. For 1.50, add either property to the style element: ".product-grid .product-item .description".

Or in the codebehind (Modules\ProductBox1.ascx.cs), replace

lShortDescription.Text = product.ShortDescription;

with the following:

lShortDescription.Text = (product.ShortDescription.Length > 200)?
                         String.Concat(product.ShortDescription.SubString(0, 200), "..."):
                         product.ShortDescription;

to truncate the text and append an ellipsis. I would use the CSS method as the truncated text could still overflow the description box.

.

mb, thank you - that did the trick

- hayden

I tried to hide the short description scroll bars in the category page using the overflow: hidden css code, but it doesn't hide the scroll bar.

I have post this in another forum:
https://www.nopcommerce.com/boards/t/4466/short-description-has-scroll-bars.aspx

The code is like this:

.product-grid .product-item .description
{
  margin: 5px 0px 0 0px;
  font-size: 0.85em;
  overflow: hidden;
  text-align: center;
  padding: 15px 15px 15px 15px;
  border-top: solid 1px #f0f0f0;
  height: 80px;
{

The scroll bar on my category page, makes the layout looks ugly. Can someone help, please?

Thanks in advance.

Nevermind, I got it resolved.

ttun76,

for some reason, I never got scrollbars - but for other users who face this issue, can you post your solution

hello mb

This is the code that I change from ShortDescription to FullDescription

                lFullDescription.Text = (product.LocalizedFullDescription.Length > 200) ?
                    String.Concat(product.FullDescription.Substring(0, 200), "...") :
                    product.FullDescription;

The problem is if the HTML is a part of the string(200 letters), the code will be cut off too. And it would be chaos when it show in the webpage

Could you please suggest the solution for me?

Thank you in advance.

Godji

The CSS property overflow is the best to use in these situations. If you set overflow to hidden then you shouldn't get scrollbars... but if you do, you can set them like this manually:

overrflow: hidden; <- for hiding
overflow-x: hidden; <- for horizontal scrolling
overflow-y: hidden; <- for vertical scrolling

Going into the code behind to limit the text is just too much work for something that you can just set one CSS property to handle.

hi, Barry Franklin

Thank you for your idea. It is an excellent idea.

One question, if there are more than 100 products in one page, would it be loading the web page repeatedly?

Thank you in advance

Godji

I have a new trick for everyone who, want to use FullDescription instant of ShortDescription in ProductBox1,ProductBox2

in ProductBox1.ascx

<asp:Literal runat="server" ID="lShortDescription"></asp:Literal>

replace with

 <asp:Literal runat="server" ID="lFullDescription"></asp:Literal>

in ProductBox1.ascx.cs

 lShortDescription.Text = product.LocalizedShortDescription;

replace with

       lFullDescription.Text = RemoveTagsHtml((product.LocalizedFullDescription.Length > 200) ?
                String.Concat(product.FullDescription.Substring(0, 200), "...") :
                product.FullDescription);

and add

 private static string RemoveTagsHtml(string html)
        {
            string returnStr = "";
            bool insideTag = false;
            for (int i = 0; i < html.Length; ++i)
            {
                char c = html[i];
                if (c == '<')
                    insideTag = true;
                if (!insideTag)
                    returnStr += c;
                if (c == '>')
                    insideTag = false;
            }
            return returnStr;
        }

in css you just add

 overflow: hidden;

(Example is in above, ttun76, bfranklin825) This is to prevent the text that is too long.

This is very interesting and very useful trick that I found out, Hoping it is helping for everyone.!~