Service Portal [SC Catalog Item (widget-sc-cat-item-v2)]:

Images added in the Description field of catalog items are not responsive to reize dynamically and flow out of the frame.

Steps to Reproduce


1. Login a pre-Madrid instance.

2. Make sure the new "SC Catalog Item" widget is used on the "sc_cat_item" portal page (Service Portal > Pages > ID = "sc_cat_item").

3. Open any OOB catalog item via Service Catalog > Catalog Definitions > Maintain Items.

4. Open for example "Standard Laptop" and make sure the "Description" (HTML) field is editable (if not then disable the corresponding ACL).

5. Add a medium-sized image in the field (before/in-between/after the text body) and Save the record.

6. Open in the portal page the catalog item ( /sp?id=sc_cat_item&sys_id=<sys_id_of_the_item> )

7. Notice the image overflows out of the page frame.


This issue is fixed in Madrid. Please review the Fixed In section to determine the latest available patch your instance can be upgraded to.

As a workaround, in case if there is a cloned widget in place: 

1 - Open the cloned widget. 

2 - Find line 34 under "Body HTML Template", which renders the catalog item's "Description" field's HTML contents: 

<div ng-bind-html="::data.sc_cat_item.description"></div>

3 - Add a unique id to this div element (like below): 

<div ng-bind-html="::data.sc_cat_item.description" id="item-description"></div>

4 - With above as example, add the following inside CSS field: 

#item-description img {
width: 100%;
height: auto;


Related Problem: PRB1317273

Seen In

There is no data to report.

Fixed In


Associated Community Threads

There is no data to report.

Article Information

Last Updated:2019-05-21 11:42:03