Remove p-timeline-event-opposite space from PrimeNG Timeline in Angular 17

Discussão em 'Angular' iniciado por Ben, Novembro 19, 2024.

  1. Ben

    Ben Guest

    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""
    ];

    Continue reading...

Compartilhe esta Página