Taxonomy Content Card - - Increase character limit

iamkurt
Tera Contributor

Continuing this thread

 

As can be see I the screenshots attached, I want to squeeze in more words into the tile so that user is as much informed as possible. How can I maximize the amount of characters that can be put inside the content card? All this should be achieved only on the topic I am working on viz. “Test - 2nd June 2025” in the screenshots.

For ex – currently, we see only 2 lines of short description (or as we call it – help text) reflected in the content card. We would like to see 3 lines.

I found this discussion and it seems to go into an endless rabbit hole → https://www.servicenow.com/community/employee-center-forum/change-label-on-content-card/m-p/3057787/... , esp @Pooja_Patil 's comment as highlighted in screenshots.

 

Question 1 – How do I find what the current character limit for short description on the content card/ tile?

Question 2 – How do I achieve my requirement, only for the topic I am working on?

I cloned “Taxonomy Content Card” widget in my PDI and made the following replacement in the HTML body

 

The below was initially present ↓↓↓↓

        <div class="item-description text-ellipsis text-ellipsis-two-line">

          <span ng-bind-html="c.description"></span>

        </div>

And I replaced that with the below ↓↓↓

        <div class="item-description text-ellipsis text-ellipsis-three-line">

          <span ng-bind-html="c.description"></span>

        </div>

 

iamkurt_0-1749169776698.png

 

 

I also added this in the CSS section

.three-line-ellipsis {

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

}

 

But I don’t see any changes reflected.

Since I cloned, do I need to deactivate the original widget?

 

I ultimately opened Employee Taxonomy Topic in Page Designer , hoping to see if the changes I made have been reflected there (screenshot attached) but got this message → “Error Warning: This is a High Risk file that might get updated again in later releases. Do not alter this file unless necessary.”

 

Will someone please advise?

 

 

iamkurt_1-1749169776703.png

 

 

iamkurt_2-1749169776711.png

 

 

iamkurt_3-1749169776716.png

 

 

iamkurt_4-1749169776721.png

 

 

iamkurt_5-1749169776721.png

 

 

iamkurt_6-1749169776728.png

 

 

iamkurt_7-1749169776735.png

 

 

Any suggestions woould be appreciated

 

 

 

12 REPLIES 12

Pooja_Patil
ServiceNow Employee
ServiceNow Employee

@iamkurt , this can be achieved by adding CSS to instance of the widget topic-content.

 

.content-card-container .item-description.text-ellipsis.text-ellipsis-two-line {
	-webkit-line-clamp: 3;
}

This way you will not miss any upgrades to the widget, you will only have to merge changes for the widget instance on upgrades.

 

Please mark this as Helpful / Accept the Solution if this helps.

 

Note - please don't tag individuals, anyone in the community can help.

Thanks @Pooja_Patil for your quick response.

 

Would it be possible to restrict this change only to 1 topic viz. "2nd Jun 2025" as I have shown in the post? I don't want other topics to be affected. 

Hello @Pooja_Patil - please don't mind if I ask another question. I am quite confounded by "instance of the widget topic-content"

There is only 1 topic content as I see currently. Please check screenshot below. 

If I want to create an instance of my own widget topic content, do I have to create a new page for it?

iamkurt_0-1749186662859.png

 

Pooja_Patil
ServiceNow Employee
ServiceNow Employee

@iamkurt , when widget is added on the page, it creates it's own instance.

For ex, on emp_taxonomy_topic page, here's the instance of Topic Content. Click on the Instance link.

 

Pooja_Patil_3-1749211211064.png

 

 

You can also get to it from Widget Instances list. Service Portal > Widget Instances

 

Pooja_Patil_1-1749210941603.png

 

 

 

@Pooja_Patil - Thanks for the response.

 

1) Is topic_content enough or do I need the CSS code  to add to below three widgets? 

widget, content-card

widget, catalog-content

widget, topic_content

2) Is CSS enough or do I need to make some HTML changes?

 

3) I see there is a high risk message flashing. What are the risks and caveats I need to know before proceeding with modification of this file? Will the operations team have lots of headaches during upgrades? 

iamkurt_0-1749211701849.png

4) Furthermore, I cloned the topic_content widget but I am in the dark about how to create its instance for a specific page, or better yet, for a specific topic. I have attached screenshots below and also PDF and XML export of the same. Would you please help here? 

iamkurt_0-1749212114492.png