Timeline - center Text

Webix JS
1

Hi webix team,

I have a TimeLine Snippet https://snippet.webix.com/2rlg4qvk

  • in the TimeLine the text is in left position to the circles. Is it possible to center the text relative to the circle?

  • is it possible to put a number or a character in the TimeLine circle?

Thanks for advice

2

Hello, @RainerRoss

TimeLine view has quite strict rendering rules.
Each TimeLine item is rendered with a quite complex template where elements (text and SVG lines and circles) get precisely calculated sizes and positions (while the HTML itself is simple, the calculations vary depending on the timeline type).
So far both text and circle are aligned to the left border of the item in the horizontal TimeLine.
Unfortunately, there is no way to simply move the text relative to the circle via CSS, as it will overflow the item’s size.
On the other hand, it’s possible to change the inner HTML for each item via the template.
Below, here is the snippet with the code of a standard TimeLine template. By changing sizes and coordinates, adding some inner parts (number or a character), you will move HTML elements and change their view.
Please, pay attention, code is provided both for the horizontal and for the vertical direction of timeLine.
https://snippet.webix.com/1uz26lyj