0

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

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Nitesh Agrawal
  • 105
  • 1
  • 2
  • 12

2 Answers2

1

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

Marc
  • 6,051
  • 5
  • 26
  • 56
  • This is super way to achieve the linebreak. According to documentation white-space: pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Thanks ! – Nitesh Agrawal Nov 23 '15 at 16:38
0

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

Qualiture
  • 4,900
  • 7
  • 27
  • 38
  • Yes, we also observed the same in the rendered element. Could you please provide more details on how we can override the renderer. – Nitesh Agrawal Nov 23 '15 at 16:08
  • Never tried it myself yet, but maybe https://help.sap.com/saphelp_uiaddon10/helpdata/en/91/f393916f4d1014b6dd926db0e91070/content.htm gives some pointers – Qualiture Nov 23 '15 at 16:17