Bootstrap grid col width if empty

Question

I am facing an issue atm with the grid system. While I try to do some kanban style d&d system.

The issue is shown in the pic below. Every card should be in a place as the arrows suggest. Since the 2nd column is "empty" -> no cards in it yet, it's only have the padding applied to it.

Previously it was working well since everything was in the same col, and since the header(color indicated card) was in said col it'd have the correct width.

However I needed to separate the header since I'd like to implement some sticky behavior -> header should stay on top when we use vertical scroll.

The template looks like:

<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;
}

Maybe you could enhance your template to add a class of empty to the col if there is no content and then use display:none on this column — yunzen
@yunzen I think you missunderstood i need that column. Since it is the container of the draggable cards. And since it has no width just the padding the whole thing is off. — Exitl0l

ForestG ForestG · Accepted Answer · 2019-08-12T10:33:54

You already apply a minimum width via this rule:

  .col {
    min-width: min-content;
  }

I would modifly the min-contant value to the minimum column width you want if you can predict that in px value(either by fix value in the css or [style.min-width]=).

Another approach can be, if you do include the "sticky" top row and the other columns in the same columns as you said you did before. You can mark only the top cards (selected via a special attribute in the datamodel for instance) for sticky behaviour in that case as well.

Bootstrap grid col width if empty

1 Answers