I am using the PrimeNG Timeline module to display a couple of simple horizontal timelines with content on the top side in a table. How can I remove the space taken up from the .p-timeline-event-opposite section? When I use the chrome debugger and select the timeline element the .pitimeline-event-opposite is always there taking up space.
I am following the Horizontal example here: https://primeng.org/timeline#horizontal
But even there you can see a lot of space between the timelines because the opposite section is taking up room.
Here is my code:
<tr>
<td>Test label in front</td>
<td>
<p-timeline [value]="events" layout="horizontal" align="center">
<ng-template pTemplate="content" let-event title="event" style="display: none;">
</ng-template>
</p-timeline>
</td>
<td>Test label after</td>
</tr>
<tr>
<td >Test label in front</td>
<td >
<p-timeline [value]="events" layout="horizontal" align="center">
<ng-template pTemplate="content" let-event title="event">
</ng-template>
</p-timeline>
</td>
<td>Test label after</td>
</tr>
Events is just an array of strings:
events: string[] = [
"Test 1", "Test 2", "Test 2", "Test 4", "Test 5", "Test 6", "Test 7""
];
It is due to the internal styling of prime-ng, so you need to override it manually using the below CSS.
.custom-end-width .p-timeline-horizontal .p-timeline-event:last-child {
min-width: 33px !important;
}
Note: I am using a class to control where the style gets applied, we need to add the CSS to global-styles.css to apply it. Also add the same class on the HTML.
<div class="card flex flex-column gap-3 custom-end-width">
<p-timeline [value]="events" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event> {{ event }} </ng-template>
</p-timeline>
<p-timeline [value]="events" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event> {{ event }} </ng-template>
</p-timeline>
<p-timeline [value]="events" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event> {{ event }} </ng-template>
<ng-template pTemplate="opposite" let-event>
<span> </span>
</ng-template>
</p-timeline>
</div>
Stackblitz Demo
2