Topic: TImeline Display Issues
Expected behavior I would expect the timeline widget to fill the parent element.
Actual behavior The formatting is crunched together and does not respond fluidly to the resizing of the display. See: https://i.imgur.com/iKOc3eZ.png
Resources (screenshots, code snippets etc.)
<div *ngIf="currentRequest$ | async as existingrequest; else loading"
class="row">
<div class="col-6">
Omitted for brevity
</div>
<div class="col-6">
<div class="row">
<div class="col">
Omitted for brevity
</div>
<div class="col">
Omitted for brevity
</div>
</div>
<div class="row">
<div class="timeline-main">
<ul class="stepper stepper-vertical timeline timeline-basic">
<li *ngFor="let event of existingrequest.requestHistory; index as i; even as isEven; odd as isOdd">
<a>
<span [ngClass]="{'primary-color': isOdd, 'secondary-color': isEven}"
class="circle z-depth-1-half">
<mdb-icon *ngIf="event.refHistoryEventId == 1"
fas
icon="question">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 2"
far
icon="thumbs-up">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 3"
fas
icon="times">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 4"
fas
icon="backspace">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 5"
fas
icon="toggle-off">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 6"
fas
icon="check">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 7"
fas
icon="clipboard-list">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 8"
fas
icon="wrench">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId == 9"
fas
icon="edit">
</mdb-icon>
<mdb-icon *ngIf="event.refHistoryEventId > 9"
fas
icon="ellipsis-h">
</mdb-icon>
</span>
</a>
<div class="step-content z-depth-1 ml-xl-0 p-4">
<h4 class="font-weight-bold"> {{ event.refHistoryEvent.event }}</h4>
<p class="text-muted mt-3">
<i aria-hidden="true"
class="far fa-clock">
</i> {{ getEventTimestampDetails(event) }}
</p>
<p class="mb-0">{{ event.details }}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<ng-template #loading>
<div class="row mb-4">
<div class="col-12 mx-auto">
<mdb-progress-bar class="progress primary-color-dark"
mode="indeterminate">
</mdb-progress-bar>
</div>
</div>
</ng-template>
Bartosz Termena staff answered 5 years ago
Dear @Jordan
This is happening, because every second <li>
tag should have timeline-inverted
class. Then the timeline is fully responsive.
You can try to use ngClass
and check by index (is the index even or not).
Also, for certainty - do you have required styles import? https://mdbootstrap.com/plugins/angular/timeline/
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes