Timeline row height - how to configure gap between events, row height vs event height

#1

I have implemented a timeline view with a custom event template. Right now, I can’t get the timeline to match the requested design because the event sits unevenly in the row - there is more space above the event than below the event. Also, if there are multiple stacked events, I can’t seem to control the distance between the events. If I switch to “equal” row height, the events bleed outside of the resource row (even though they do stack by overlapping, they do not overlap “enough”). Finally, when the timeline first loads and there are no events, each row is rendered very short (~52px tall), and only grows to the correct height once I drop the first timeline event. This all looks very strange.

I would rather keep “variable” row height anyway but I just want to control the gaps / spacing within the event row so that it’s an even gap throughout. Is there any way to adjust this / override how this is all calculated? This all seems to be set by auto-updating inline styles for the moment so it’s difficult to override.

Thanks for any help + suggestions!!

example
example.png664×821 331 KB

#2

Just bumping this to see if I can get an opinion out of the mods.

#3

Hi @Steve_Weiss,

Currently there is no built in option to make the gap between the events equal. The timeline row heights are calculated with the following formula: the number of overlapping events in the row * the event heights + 10px.

But with some custom code it might be possible to adjust the spacing between the:

  1. Since your are using renderScheduleEvent option, you have control over the space between the events, by adjusting the main container’s margins/paddings.

  2. You can adjust the top css property of the event container with custom css to start from 5px, this way the top and bottom spacing will be qual:

.mbsc-timeline-events {
top: 5px;
}

Let me know if this helps!

#4

Thanks for the response!

Unfortunately, this just doesn’t seem to be the case that I can control the gap between my events. I’m not setting any margin on my events at all (and any padding would be internal to the event bubble). Mobiscroll is setting an inline style that dictates where in the row the event is positioned:

image

That’s top: 64px; - so 64px from the top of the row. They aren’t actually positioned relative to each other, only to the row. What I want to do is hook into whatever code is driving that calculation and change how it’s getting that “64px” value.

Your margin-top suggestion does work for the initial row gap but it does not resolve the extra space at the end of the row, so it’s still an uneven gap. If I try to make the bubbles larger to fill the gap at the bottom, it just keeps the gap and makes the whole row larger.

Honestly, just fixing the gap between the events would probably be enough to satisfy the design team; the extra gap on the bottom isn’t desired but I don’t think they’re bothering anyone that much.

Do you know of any way the timeline grid could start out with the correct row height for an event and not “jump” to the right size only after someone creates their first event?

#5

For anyone who’s stumbling upon this now, looks like the feature was added to adjust the row height and remove the gap:

https://blog.mobiscroll.com/new-release-5-22/