Timeline event row height

Hi, I want to display more information of the events in the timeline view. For this I want to increase the height of every event entry.

<ng-template #eventTemplate let-data>
    <div class="md-timeline-template-event" [ngStyle]="{background: data.color}">
      <div class="md-timeline-template-event-cont">
        <div class="md-timeline-template-title">{{data.original.title}}</div>
        <div class="md-timeline-template-subtitle">{{data.original.responsible}}</div>


    .md-timeline-template-event-cont {
        font-size: 15px;
        height: 55px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

But the row height seems to stay the same, so the events are now overlapping:

Can I increase the row height to get some space between the events?

Hi @Bastifix :wave:

From Mobiscroll version 5.13 we are introduced variable row heights for resources.

The new rowHeight option accepts variable height, which is the new default compared to equal heights that was the only option before this release.
This uses the vertical space better and is aesthetically more pleasing.
Events are rendered with equal heights and the rows grow/shrink as needed.

So, I would recommend upgrading to the latest version (if it’s relevant) and using the solution mentioned above.

1 Like

Thanks, your solution works fine!
But when working with the popup to edit data, the arrow is now centered to the whole available space instead of the event itself.
Is there also a workaround? It’s only an optical issue, but may lead to confusion sometimes on the user side.

Hello Bastifix,

The anchor should be set to the event element:

onEventClick: (args) => {
  this.popupAnchor = args.domEvent.currentTarget;

Sure, but with rowHeight: 'equal' the event takes the whole height of the row. (not visible, but clickable)
and so the arrow is “centered” but not to the visible event.

Ah, right! In that case you need to get the child element, like: args.domEvent.currentTarget.querySelector('.md-timeline-template-event')

1 Like