CODEWITHSUNDEEP
sapui5
Nitesh Agrawal
Nitesh Agrawal

Reputation: 117

How to display newline in TimelineItem control's text property?

We have a SAPUI5 timeline control, where we are showing the comments coming from server.

The issue is, if the comments contain a newline \n, then the Timeline control is not able to display the text in newline. Instead, it introduces space wherever \n is present. We have tried formatting \n to unicode character also but that also didn't worked. Timeline control aggregates TimelineItem. The control we are using is: https://ui5.sap.com/#/api/sap.suite.ui.commons.TimelineItem

Code snippet can be found at: https://jsbin.com/kuluyehilu/edit?html,output

Upvotes: 0

Views: 3968

Answers (2)

Marc
Marc

Reputation: 6190

I inspected your example and came up with the following solution.

Since the text is embedded in a <span>, all unnecessary whitespace will be trimmed. What you can do is telling the span (via CSS) that it should display the whitespace anyway.

If you don't have a CSS file in your project yet, create one. Then add the following lines

div.sapSuiteUiCommonsTimelineItemShellBody>span {
    white-space: pre;
}

This should do the trick.

JSBin: https://jsbin.com/feladeneso/1/edit?html,output

Upvotes: 1

Qualiture
Qualiture

Reputation: 4920

If you inspect the rendered element, you will see it actually put in the break:

<span id="__item0-realtext">x
y</span>

...but did not convert it to a <br/> tag. You cannot add the tag yourself since it will be escaped, either. Maybe you can try to override the renderer, and convert any line breaks to html breaks

Upvotes: 0

Related Questions