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.