How can I format the Description field within widget?

[Moedeb]

I am displaying the contents of the description field within the Service Portal so our customers can see everything that is in the ticket that helps them see everything is correctly recorded.

The issue that I have is that the field shows as one solid block of text, it loses all formatting once displayed in the portal.

I'd also ultimately like the field names to be in bold (eg: Short Description and Description as a heading in bold above the contents of the field)

Can anyone please assist with this?

[Aleksas Kucins1]

You can modify widget instance on the platform to add css properties or the widget itself to fit text into a box. See word-wrap property: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

For the bold part, just modify the html code to add <b> </b> tags.

[Moedeb]

Thank you for the idea, however I certainly haven't been able to get that to work, tried a number of times now in different areas of the code and had no luck at all.

If you were able to post some code that does this I would very much appreciate it 🙂

[Aleksas Kucins1 · Accepted solution]

This is not complete OOTB solution, but make sure data.description holds information from incident description field in the server side code. 

HTML should look like this:

<div>
    <span class="description">${Description}</span>
</div>
<div class="short_descr">
    <span class="field-display">{{data.description}}</span>
</div> 

CSS should look like this: 

.short_descr{
  white-space: pre-line;
  word-break: break-all;
}

Server side (in the end of Ticket Fields widget):

data.description = gr.getDisplayValue("description");

[Miguel Posada]

This CSS works like a charm. 

Thanks!