Scroll box for Short Description (Or Full Description)

I'd like to implement a scroll box or an expandable text area in the Short Description (Or Full Description) field.

I'm assuming its in my Theme CSS file? And includes something like overflow; auto/hidden

Thanks.

JoeyAK wrote:

Please look into: Nop.Web/Views/Product/ProductTemplate.Simple.cshtml

If you are creating a theme, you can simply override this view.

This may be helpful to you: http://www.strivingprogrammers.com/blog/tag/Beginner's%20Guide%20to%20nopCommerce%20Theme%20Development

I'm not creating a theme, I'd just like to modify the default one.

You mentioned about the theme so I got an impression that you are creating your custom theme.

If you are not creating a custom theme then that's ok. Simply go to this location and make changes (as per your requirements): Nop.Web/Views/Product/ProductTemplate.Simple.cshtml

What would be the required code? I thought this would be a css issue. Since what I want is, when Short Description field progresses beyond say 22 lines, a scroll box automatically appears.

JoeyAK wrote:

I apologize, I misunderstood your question (I thought you are looking to add a new field in the template).

To add a scrollbar to short description you only need to update CSS (not the view).

Go to your theme's styles.css and look for the class ".short-description" and add

overflow:scroll;

You can do something like this to have more control over the field.

.short-description {
    height:100px;
    width:200px;
    font-size: 12px;
    overflow:scroll;
}

What I found is:

}
.overview .short-description {
  margin: 0 0 25px;
  line-height: 22px;
  color: #666;
}

I change to:

}
.overview .short-description {
  margin: 0 0 25px;
  line-height: 22px;
  color: #666;
        overflow: scroll
}

Nothing occurs.

JoeyAK wrote:

You are missing (;) semicolon after scroll

Also - You might want to add width and height to control the text and scroll bar.

(If you still don't see any chance then try clearing your browser's cache and cookies)

I got it working, thank you for the assistance. However, is there anyway to display just the vertical scroll bar and not the horizontal?

Ok got it, just changed to scroll: auto;

Thanks very much.