Catalog item picture getting cut off on service portal catalog item tile

[Bruler1230]

Hello,

I am adding pictures to my catalog items, on the service portal, if the item name wraps onto a second line, the picture gets partially cut off. Is there a way to resize the catalog item tiles/cards on the service portal to show the full picture if the title is longer than one line?

Thanks

[Mark Roethof]

Hi there,

You mean for example the tiles on the "SC Catagory Page" widget? This is correct.

You could make the tiles larger / change the height. By editing (and therefor cloning) the widget, or by adding CSS to the instance of the widget.

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn
Community article list

[Bruler1230]

Yes, that is what i am talking about. Do you have any specifics on what i need to change to make the tiles larger? I was not able to pinpoint what i needed to change in the widget.

thanks

[Mark Roethof · Accepted solution]

I don't have a good solution for this, though this help you pinpoint where this is:

It concerns specifically this part of the HTML template.

If you for example replace class="overflow-100" with style="150px", you would already get a bigger tile. Obviously you would need to clone the widget for this.

You could also ammend this to the CSS of the instance of the widget. Then you don't need to clone the widget (= tested, works also fine). I personally would prefer this option. Because then you don't need to clone the widget, your not passing out on updates on the widget, etc..

For example CSS in the instance like below already works:

.overflow-100 {
    height:150px;
}

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn
Community article list

[Bruler1230]

Thanks, I was able to get this working by modifying the CSS.