Styling and Appearance in Blazor Kanban Component

23 Apr 20248 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. 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.
.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.