Background item text hidden by other items in Timline

[mcshaman]

Background items are very useful me for labelling a time range but I constantly run into an issue where the label for the background item gets covered up by other items such as ranged items. Is it possible to configure timeline so that the background item is a clear space where no other items can overlap?

[josdejong]

What you can do is make the label of background items always be on top by giving them a z-index with CSS.

I'm not sure what you mean with keeping a clear space where no other items can overlap: it's up to you to take care of your data, the Timeline just displays what you feed it. If you mean like preventing users to drag an item on top of some background item: I think you can use the onMoving event handler for that (see this example).

[mcshaman]

Not quite... What I am trying to avoid is situations like this:

By having timeline do something like this:

Any ideas?

[brichbe]

I've implemented a couple things similar to what you're asking here, so this may give you some ideas to get you started:

First, I have background items similar to what you have pictured here that span vertically across all groups. For these I want to prevent their content label from being overlapped by the non-background items. So to do this, I create a group that's basically blank: it has content: '<br><br>' to give it the height I want, but has no text and a simple style, and I specifically order my DataSet of groups so this blank group is always first. This provides a vertical buffer at the top of the timeline so all the non-background items within the other groups are always displayed below the blank group, which means the overlap doesn't occur.

Second, I also handle a case similar to your images where I want to avoid overlap within the same group. To do this, you'll want to use subgroups. To use subgroups in a way that achieves your second image, it's similar to what I described above but using subgroups: create a "blank" subgroup that is always ordered first of the other subgroups based on the subgroupOrder you define. Within this blank subgroup you add an invisible range item along the lines of: content: '', type: 'range', style: 'visibility: hidden', start: startTime, end: startTime (no text and invisible) and again, you'll need to specify a subgroup order such that this group is always placed above all other subgroups. All that's left is to place all your non-background items into one or more different subgroups whose subgroupOrder ensures they're always below the blank one, which should give the effect of your second image where there's always a vertical buffer between the top of "Group 1" and the top of "Event".

[mcshaman]

Thanks for your detailed response @brichbe . Your workaround should help us get the concept over the line.

[josdejong]

@mcshaman good idea to let the labels of background items stay on top of items, that makes a lot of sense. Let's put it on the to-do list.