Style in Vue Kanban component

16 Mar 202313 minutes to read

To modify the Kanban appearance, you need to override the default CSS of Kanban. Also, you have an option to create your own custom theme using our Theme Studio. Please find the list of CSS classes in Kanban.

Css class Purpose      
.e-kanban .e-kanban-table customize the kanban.      
.e-kanban .e-kanban-header .e-header-cells Header cells of kanban.      
.e-kanban .e-kanban-header .e-header-cells .e-header-wrap .e-header-title Header title of kanban.      
.e-kanban .e-kanban-header .e-header-cells.e-min-color Header cells minimum color of kanban.      
.e-kanban .e-kanban-header .e-header-cells.e-max-color Header cells maximum color of kanban.      
.e-kanban .e-kanban-header .e-header-cells.e-collapsed.e-min-color Header cells of collapsed column minimum color in column constraint type of kanban.      
.e-kanban .e-kanban-header .e-header-cells.e-collapsed.e-max-color Header cells of collapsed column maximum color in column constraint type of kanban.      
.e-kanban .e-kanban-header .e-header-cells .e-header-text Header text of Kanban.      
.e-kanban .e-kanban-header .e-header-cells .e-item-count Header cells Item count of Kanban.      
.e-kanban .e-kanban-header .e-header-cells .e-limits Header cells limits in column constraint type of kanban.      
.e-kanban .e-kanban-header .e-header-cells .e-limits .e-min-count Header cells minimum count of kanban.      
.e-kanban .e-kanban-header .e-header-cells .e-limits .e-max-count Header cells maximum count of kanban.      
.e-kanban .e-kanban-content Customize kanban Content.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits Content cells limits in swimlane constraint type of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-min-count Content cells minimum count of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-max-count Content cells maximum count of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells.e-min-color Content cells minimum color of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells.e-max-color Content cells maximum color of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text Content cells of collapsed header text.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text .e-item-count Content cells of collapsed header text Item count.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button Add button in content cells of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button .e-show-add-icon Customize content cells add icon of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-empty-card Empty content cells of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card Customize cards in kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-header .e-card-header-title Cards header title of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-footer Cards footer of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-content Cards content of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color Cards color of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tags Customize Card tags of kanban.      
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tag Card tag of kanban.      
.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand Content cells of swimlane row expand of kanban.      
.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse Content cells of swimlane row collapse of kanban.      
.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-text Content cells of swimlane header text of kanban.      
.e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-item-count Content cells of swimlane items count of kanban.      
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells swimlane content cells of kanban.      
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-dropping Customize swimlane content cells card dropping of kanban.      
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-wrapper Swimlane content cells of card wrapper.      
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-min-color Swimlane content cells of minimum color of kanban.      
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-max-color Swimlane content cells of maximum color of kanban. Customize the kanban CSS theme. Please find the list of CSS classes in Kanban. .e-kanban .e-kanban-table .e-header-cells Header cells of kanban.
.e-kanban .e-kanban-table .e-header-cells .e-header-text Header text of Kanban.      
.e-kanban .e-kanban-table .e-header-cells .e-item-count Header cells Item count of Kanban.      
.e-kanban .e-kanban-table .e-header-cells .e-column-expand Header cells of toggle icon in column expand.      
.e-kanban .e-kanban-table .e-header-cells .e-column-collapse Header cells of toggle icon in column collapse.      
.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) .e-content-cells swimlane content cells of kanban.      
.e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-swimlane-text Content cells of swimlane header text of kanban.      
.e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-item-count Content cells of swimlane items count of kanban.      
.e-kanban .e-kanban-table.e-content-table .e-content-row .e-show-add-button .e-show-add-icon Add icon in content cells of kanban.      
.e-kanban .e-kanban-table.e-content-table .e-card.e-selection Selected card of kanban.      
.e-kanban .e-kanban-table.e-content-table .e-card .e-card-header Cards header in kanban.      
.e-kanban .e-kanban-table.e-content-table .e-card .e-card-content Cards content in kanban.      
.e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label Cards label in kanban.      

To set fixed position to the Kanban header

The Fixed header in Kanban control can be customized in following ways,

By setting a fixed height to the Kanban content,

.e-kanban .e-kanban-content {
  height: 500px;
}

By customizing the CSS for the Kanban header.

.e-kanban-header {  
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  top: 0;
}

Note: It will not affect the Kanban content’s height.