timeline items with overlapping texts

[schotman]

My timeline view on mobile shows overlapping texts when scrolling horizontally. This issues occurs in also in the http://visjs.org/examples/timeline/items/pointItems.html example under specific situation.
Steps to reproduce:

1. resize the chart such that the view contains items on the same line (screenshot 1)
2. scroll to the left such that the group resizes in height
3. scroll back to the right and see that items are overlapping (screenshot 2)

When pinching the screen redraws and everything is fine again, any idea how to invoke a redraw after a scroll?

[josdejong]

Thanks for the detailed description, I can reproduce this bug.

There are event rangechange and rangechanged fired while moving and zooming, you could use that to force an extra redraw.

[bradh]

Still appears to occur with current version (develop branch as of 3456acf, although that particular commit is nothing to do with this bug, just the testing point).

I couldn't reproduce with the left-right sequence, but it does occasionally occur if you go right (to get the resizing) then left.

[roboslone]

This is happening to me while using react-visjs-timeline and custom CSS with .vis-item .vis-item-overflow {overflow: visible;}:

Is there a way to make timeline consider whole content width?

[bradh]

Perhaps this is the same issue as #1982 ?

[yotamberk]

@roboslone The addition of overflow: visible is not healthy for the timeline. it is not meant to show the contents. If you want to show contents without overlapping, use point items. The stacking function of items does not consider contents but their containers. What you are requesting is a new feature.

@bradh the original issue is indeed a duplicate

[mojoaxel]

Is there a way to make timeline consider whole content width?

@roboslone This makes no sense! Timeline items have a start and a end. How would you recommend to handle dynamic sizing?

the original issue is indeed a duplicate

@yotamberk I'm not sure if this a duplicate of #1982 If so, we should close one of them.

[roboslone]

@mojoaxel, in my case almost all items are visually shorter, then their content. How does this work for point items? They have end, that isn't visible, but is considered by stacking mechanism? If so, would it be possible to have similar fake end for ranged items and only consider it for stacking, but not for drawing?

[mojoaxel]

@roboslone In your case I would recommend shortening the text e.g. by removing the hash and e.g. use different colors or icons for "deactivation", "remove" and so on...
Maybe you can first figure out how you want the timeline and your content to look and than we can see if it is possible to realize! Maybe could can draw a mockup or something!?

[roboslone]

@mojoaxel, unfortunately, that's not possible, item content is provided by users, I have no control over it and I shouldn't modify info supplied by users.
As to mockup, I think it's pretty straight forward, I just want timeline to consider text length, like it does with point events.

[mojoaxel]

I just want timeline to consider text length, like it does with point events.

I don't understand. Items always have a start and an end and therefore a fixed width. They are fundamentally different to point events. Why don't you use point events?

[roboslone]

@mojoaxel, it's important, that my users can clearly see start end end for each item, so I can't use point events.
Here's what I mean:

[mojoaxel]

I still don't understand the concept on how this should work. Can anybody help please!!

[yotamberk]

I'm sorry @roboslone but I agree with @mojoaxel . In your case it doesn't make sense to have a a range item. You say that the end time should be dependent on the text (content), but that's not what a range item is. A range item is a static range and does not change its end by zoom level. I really do think you need a point item as @mojoaxel mentioned.

[yotamberk]

fixed with #2774. Thanks @bradh !

[roboslone]

@mojoaxel, @yotamberk, I think we got a misunderstanding. I don't wand end time to be dependent on the text, range item works right for me. The only problem I got is when I zoom timeline ranged items with long text get overlapped.

[bradh]

@roboslone I think you possibly have a different issue to the original bug report, and would be better tracked separately. Can you try with a new develop branch build, and verify your problem still occurs, then raise a ticket. A jsbin would be appropriate.

[mojoaxel]

The only problem I got is when I zoom timeline ranged items with long text get overlapped.

@roboslone How would the user see the "end" of an item if the items just would be increased? Please open a new issue if you still think there is a feature request we should track.

[lbrdar]

Using overflow: visible works great now, but it seems to be limited on default template only. When I try to use React template for timeline items, overflowed label starts overlapping. Does anyone know what might be causing this or how to solve it?

[lbrdar]

In case someone hits this in the future - the issue was that React rendering is async, and Vis was doing all the calculation too early. Solved by adding a range changed listener and, if the event wasn't caused byUser, calling redraw() method.