My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within the list.
Below is the HTML code snippet:
<app-nav>
<div class="grid-container">
<div class="row1">
<mat-grid-list cols="6" rowHeight="100px">
<mat-grid-tile [colspan]="1" [rowspan]="1" [style.background]="lightgreen">
<h2>All Scheduled Jobs</h2>
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="1" [style.background]="lightgreen">
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="1" [style.background]="lightgreen">
<button (click)="openCreateScheduledJobDialog()" mat-mini-fab color="primary"
aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="row2"> // issue lying here:
<cdk-virtual-scroll-viewport itemSize="70" class="example-viewport">
<mat-list>
<mat-list-item *cdkVirtualFor="let scheduledjob of scheduledJobs" class="example-item">
<div class="flex-container-list-item"> // problematic flex display
<div class="details">
<h3 matLine>{{getJob(scheduledjob.jobID)}} Job</h3>
<h4 matLine> Status: {{getJobStatus(scheduledjob.isActive)}}</h4>
<p matLine>
<span> Start time: {{scheduledjob.startTime | date}} </span>
</p>
<p matLine>
<span> End time: {{scheduledjob.endTime | date}}</span>
</p>
<p matLine>
<span> Runs Every: {{scheduledjob.daysFrequency}} days
</span>
</p>
<p matLine>
<button mat-stroked-button color="primary"
(click)="openMachineDetailsDialog(scheduledjob.machineSerialNumber)">Machine Details</button>
</p>
</div>
<div class="edit"> <button mat-flat-button color="primary" (click)="openUpdateScheduledJobDialog(scheduledjob)">Edit</button></div>
<div class="delete"> <button mat-raised-button (click)="delete(scheduledjob)" color="warn">Delete</button>
</div>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
</cdk-virtual-scroll-viewport>
</div>
<div class="row3">
</div>
</div>
</app-nav>
- Note that the angular material cdk-virtual-scroll-viewport is being utilized.
Here is the accompanying CSS code:
.row1 {
grid-area: row1;
}
.row2 {
grid-area: row2;
}
.row3 {
grid-area: row3;
}
.grid-container {
display: grid;
grid-template-areas:
'row1 row1 row1'
'row2 row2 row2'
'row3 row3 row3 '
;
grid-gap: 2px;
padding: 2px;
}
.grid-container>div {
text-align: center;
padding: 10px 0;
font-size: 15px;
}
.example-viewport {
height: 600px;
border: 2px solid gray;
}
.example-item {
height: 50px;
}
/* ******************* list item flex ***************** */
.details {
background-color:lightcoral ;
}
.edit {
background-color: lightgreen;
}
.delete {
background-color: lightskyblue;
}
.flex-container-list-item {
display: flex;
border: 6px solid red;
justify-content: space-between;
--gap: 10rem;
flex-wrap: wrap;
}
.grid-container-list-item>div {
text-align: center;
padding: 10px 0;
font-size: 15px;
}