Timeline event row height

#1

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>
      </div>
    </div>
  </ng-template>

css:

    .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:

capture_002_21022022_215335
capture_002_21022022_215335.jpg942Ă—481 37.9 KB

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

#2

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
#3

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.
capture_002_05032022_230446
Is there also a workaround? It’s only an optical issue, but may lead to confusion sometimes on the user side.

#4

Hello Bastifix,

The anchor should be set to the event element:

onEventClick: (args) => {
  this.popupAnchor = args.domEvent.currentTarget;
  this.popup.open();
},
#5

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

#6

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

1 Like