Service catalog separator missing after the upgrade

[Johannes Mweli]

Hi ServiceNow Community Developers,

We created an empty catalog item to use as a separator within our Service catalog items however it's no longer working after the upgrade. It's been working all along in all the prior ServiceNow versions however after upgrading to the Utah version it stopped to work as expected. The catalog item I am referring to here is as highlighted in blue in the attached "Catalog items with a separator" screenshot.

After the upgrade what we see is as highlighted in blue in the "Catalog items with no separator" screenshot.

We open a support case with ServiceNow on this issue and their response was that this is caused by a CSS style that was changed in Utah and that CSS style is overriding a UI Macro called sc_catalog_homepage_item. ServiceNow also suggested a solution to this issue and here (in bold below) are the details of the solution they suggested:

I identified that the "sc_catalog_homepage_item" UI Macro was updated in Utah release.
Specifically is using:
<img class="catalog_item_icon" src="${jvar_iconsrc}" alt=""></img>

While in the San Diego release it was using:
<img style="vertical-align: top;" src="${jvar_iconsrc}" alt=""></img>

The CSS class: catalog_item_icon is defined as follows:
catalog_item_icon {
height: 24px;
width: 24px;
object-fit: contain;
margin-right: 8px;
vertical-align: top;
}

Which is being used for all the images on the catalog items.
And as such the only possible solution is for you to perform a customization on the UI Macro.
I suggest to create a new CSS class say:
my_item_icon {
height: 24px;
width: 100%; <==== Width property affecting the icon.
object-fit: contain;
margin-right: 8px;
vertical-align: top;
}

And then apply this class to the img tag

The problem I am running into is that I am really having a hard time trying to implement this solution. I am not even sure how to go about defining a CSS class. Even the catalog_item_icon class that they are referring to above - I don't know where and how it's defined. Do you guys know where to find CSS classes in ServiceNow?

Also, would you guys please give me some guidance on how to go about implementing the solution (highlighted in bold above) that the vendor provided.

Any help that you guys are able to provided on this will be greatly appreciated as I am really having a hard time with trying to implement this solution.

Thanks,

Johannes

[Johannes Mweli · Accepted solution]

I am going to close this as a duplicate - not required

[Johannes Mweli]

Hi Admin,

Would you please delete this question - it's a duplicate