Bulletted formatting under Description for Catalog Items

[Winnie P]

Hello There - Is there a reason why bulletted formatting does not line up ie, under Description when creating a Catalog Item. Is it possible to line up bullet points? Thank you.

[Winnie P]

Thank you Willem.  Here's more information & screenshots.  This is from the Catalog Item:

This is from the Service Portal;

[Willem · Accepted solution]

In the backend I see it aligns different:

Based on this Stackoverflow post:

https://stackoverflow.com/questions/11556493/second-line-in-li-starts-under-the-bullet-after-css-res...

you can do the following:

Then add styling:

(change <ul> to <ul style="list-style-position: outside; margin-left: 1em;">)

The result:

[Winnie P]

Thank you Willem, this worked. Do you need to make this change each time you create a new Catalog Item that contains bullet points that includes long sentences? What would be your solution if we had more than 100 Catalog Items with the same scenario? Is there a way to do a multiple fix? 🙂 I tested in my personal instance as follows and looks good:

However, when I selected the bullet point list again - it reverted back:

[Willem]

You could use an onChange client script to always convert the <ul>  to <ul style="list-style-position: outside; margin-left: 1em;"> when the Catalog item is created/updated.

Or you have to adjust the CSS in multiple places.

The client script:

you can create it on Catalog item table and check the inherited box:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	if (isLoading || newValue === '') {
		return;
	}

	if(newValue.indexOf('<ul>')!=-1){
		g_form.setValue('description', newValue.replace('<ul>', '<ul style="list-style-position: outside; margin-left: 1em;">'));
	}
	if(newValue.indexOf('<ul style="list-style-position: inside;">')!=-1){
		g_form.setValue('description', newValue.replace('<ul style="list-style-position: inside;">', '<ul style="list-style-position: outside; margin-left: 1em;">'));
	}

}

[Willem]

To fix existing records you can use a background script or fix script. Something like this:

var grItem = new GlideRecord('sc_cat_item');
grItem.addEncodedQuery('descriptionLIKE<ul>^ORdescriptionLIKE<ul style="list-style-position: inside;">');
grItem.query();
while (grItem.next()) {
    grItem.description = grItem.description.replace('<ul>', '<ul style="list-style-position: outside; margin-left: 1em;">');
    grItem.description = grItem.description.replace('<ul style="list-style-position: inside;">', '<ul style="list-style-position: outside; margin-left: 1em;">');
    grItem.update();   
}