Currently, I am encountering a problem with the grid system while attempting to create a kanban style drag and drop system.
The issue is illustrated in the image below. Each card should be positioned according to the arrows shown. As the 2nd column is currently "empty" - meaning no cards are present in it yet - only padding is applied to it. https://i.sstatic.net/sVdFA.png
Previously, everything worked fine when all elements were in the same column, and the header (color-coded card) was also in that column, ensuring the correct width.
However, I needed to separate the header to implement a sticky behavior where the header remains at the top when scrolling vertically.
The template structure is as follows:
<div #autoscroll
class="col wholeTable">
<div class="row pipe-header">
<ng-container *ngFor="let stage of cardList; let i = index">
<div class="col">
<ng-container *ngIf="pipelineConfig.headerTemplate; else noHeaderForYou">
<ng-container
*ngTemplateOutlet="pipelineConfig.headerTemplate; context : {$implicit: headerList[i], count: cardList[i].items.length}">
</ng-container>
</ng-container>
<ng-template #noHeaderForYou>
<!-- Displaying some useful info even if no custom template is present-->
<dt-pipeline-header [label]="headerList[i].elementLabel"
[count]="cardList[i].items.length">
</dt-pipeline-header>
</ng-template>
</div>
</ng-container>
</div>
<div class="row stage">
<ng-container *ngFor="let stage of cardList">
<div class="col"
dragula="cardList"
[(dragulaModel)]="stage.items"
attr.id="{{stage.key}}">
<ng-container *ngFor="let item of stage.items">
<div class="card"
[ngClass]="{
'dragabble' : pipelineConfig.permissionChecker(item),
'nodrag': !pipelineConfig.permissionChecker(item)
}">
<div class="card-body">
<ng-container *ngIf="!pipelineConfig.permissionChecker(item)">
<span class="disabled-indicator"><i class="fas fa-ban"></i></span>
</ng-container>
<ng-container
*ngTemplateOutlet="pipelineConfig.bodyTemplate; context: {$implicit: item, showColumns: showContent}">
</ng-container>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>
</div>
component.css:
@media only screen and (max-width: 600px) {
.wholeTable {
display: block;
}
}
.stage {
word-break: break-word;
min-height: 100%;
flex-wrap: nowrap;
.col {
min-width: min-content;
}
}
.card.dragabble:hover {
cursor: grab;
}
.card.dragabble, .card.nodrag {
margin: 1rem 0rem;
}
.pipe-head-divider {
margin-bottom: 0;
}
.disabled-indicator{
display: flex;
float: right;
position: relative;
top: -0.5rem;
right: -0.5rem;
}
.wholeTable {
overflow-x: scroll;
overflow-y: hidden;
flex-wrap: nowrap;
}
.pipe-header {
flex-wrap: nowrap;
}