I am currently utilizing the PrimeNG Timeline module to showcase a few straightforward horizontal timelines with content placed on the top side in a table format. How can I eliminate the space allocated by the .p-timeline-event-opposite section? Upon inspecting the timeline element using the Chrome debugger, I noticed that the .p-timeline-event-opposite consistently occupies space.
I am referring to the Horizontal example provided here: . However, even in this example, there is considerable spacing between the timelines due to the opposite section taking up space.
Here is the code snippet:
<tr>
<td>Test label before</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 before</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>
The "events" variable simply consists of an array of strings:
events: string[] = [
"Test 1", "Test 2", "Test 2", "Test 4", "Test 5", "Test 6", "Test 7"""
];