Customize end-user portal - Show service items as one column without truncation of title and description

Hello All,

I recently came across a use-case where a customer wanted to display their service items in the service catalog as a single column without the title and description of the service items being truncated.

Before and after images are attached to this post.

The code snippets are given below:

STYLESHEET:

Paste the below snippet in Admin → Helpdesk rebranding → Portal customization → Stylesheet.

#catalog-list-page #catalog-list-container #catalog-list-items #list-items .catalog-item{

min-width: 900px;

}

JQUERY:

Paste the below snippet in Page Layout

<script>

jQuery(document).on('PageUpdate NewContent', function() {

jQuery('#list-items').children('a').each(function () {

var itemInfo = jQuery(this).children('div.catalog-item-info'); // "this" is the current element in the loop

var shortTitle = jQuery(itemInfo).children('h4');

var shortDesc = jQuery(itemInfo).children('p');

var itemFullInfo = jQuery(this).children('div.service-item-tooltip'); // "this" is the current element in the loop

var longTitle = jQuery(itemFullInfo).children('h3');

var longDesc = jQuery(itemFullInfo).children('p');

shortTitle.text(longTitle.text());

shortDesc.text(longDesc.text());

});

});

</script>

Thanks!