Service catalog separator missing after the upgrade

[Johannes Mweli]

Hi ServiceNow Community Developers

We created a catalog item with no name to use a as separator in the list of catalog items. I had an icon which is what was getting display as shown in the attached "Catalog item with a separator" screenshot. Note the icon in the highlighted section of the screenshot.

After upgrading our ServiceNow platform from San Diego to Utah we lost this separator, what we now see is as shown in the "Catalog items with no separator" screenshot. Note the missing icon in the highlighted section of the screenshot

We opened a support case with ServiceNow on this issue and their response was that a CSS stype was changed and it’s overriding a UI Macro.

Here is their detailed response (in bold below)  on what the issue is and how to overcome it.

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;

}

Would you guys please guide me on how to implement this solution. I can navigate to the ui macro they are referring to here however I can’t even tell where the catalog_item_icon class is defined. I am really having a hard time with trying to implement the solution that they provided here. Do you guys know where a CSS class is defined in ServiceNow?

Any help you guys may provide on this would be greatly appreciated please.

Thanks,

Johannes