[timeline] item text doesn't stay close to its box

[carueda]

• item has text-align: center (or right) for is div.range class
• item gets partially hidden on the left while dragging or zooming
• item's text starts moving to right as long as part of the item box is still visible

• so far so good; however, the text starts getting too far apart from its box

(vis 3.1.0)

[josdejong]

An ItemRange is displayed with a container having a border and background color (class item range) and has contents (class content). The range absolutely positions it's contents such that the text stays visible when the start of the item moves off screen (like your second screenshot). That feature is a problem in this case.

A better css solution would be adjusting the css of the contents:

    .vis.timeline .item.range .content {
      text-align: center;
      width: 100%;
    }

But there still is a problem then, as the width of the contents dynamically change and the RangeItem calculates the width of the contents only once.

I think there is no solution for this right now. We can either:

• Create a new option to turn of this dynamic positioning of the contents, so the upper solution works
• Extend the ItemRange such that it supports the option align which is currently available for ItemBox only, and use this to align the contents.

[carueda]

I just noticed the "fixed #243..." commit for this reported issue. But it seems the fix is actually that the 'center' alignment (or any other in general) now works better --- the dynamic re-positioning of the text so it remains visible and close to the box as one zooms in/out or drag the area is not supported except for align='left' . Correct?

[josdejong]

Yes, that's correct, only "left" align smartly positions the contents of a range item.