Kanban - CSS API Reference

All Common CSS variables:

Specific CSS variables for Kanban styling:

• --smart-kanban-default-width: Default width of Kanban
• --smart-kanban-default-height: Default height of Kanban
• --smart-kanban-header-size: Header size of Kanban (applies to header and column headers)
• --smart-kanban-task-min-width: Min width for Kanban tasks in columns with horizontal orientation
• --smart-kanban-task-min-height: Kanban task min height
• --smart-kanban-text-max-height: Kanban task text part max height
• --smart-kanban-user-icon-size: Kanban user icon size
• --smart-kanban-user-list-width: Kanban user list width
• --smart-kanban-user-list-max-height: Kanban user list max height
• --smart-kanban-comments-list-width: Kanban comments list width
• --smart-kanban-comments-list-height: Kanban comments list height
• --smart-kanban-new-comment-height: Height of new comment section
• --smart-kanban-new-comment-height-expanded: Expanded height of new comment section
• --smart-kanban-send-button-height: Height of Send button in new comment section
• --smart-kanban-color-band-width: Kanban color band width (i.e. left border of tasks)
• --smart-data-view-padding: Padding of the CardView and Kanban
• --smart-data-view-customize-panel-width: Width of the CardView and Kanban customize panel (drop down).
• --smart-data-view-filter-panel-width: Width of the CardView and Kanban filter panel (drop down).
• --smart-data-view-sort-panel-width: Width of the CardView and Kanban sort panel (drop down).
• --smart-data-view-search-panel-width: Width of the CardView and Kanban search panel (drop down).

The following CSS selectors can be used to style Kanban:

• smart-kanban - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - a container that holds the inner structure of the element. Normally, it shoudn't be used for styling.
    • .smart-data-view-header - the Kanban's header.
      • .smart-data-view-header-button - applied to all header buttons.
      • .smart-data-view-customize-button - applied to the "Customize cards" button.
      • .smart-data-view-filter-button - applied to the "Filter" button.
      • .smart-data-view-sort-button - applied to the "Sort" button.
      • .smart-data-view-search-button - applied to the Search icon.
      • .smart-data-view-header-drop-down - applied to the header drop down.
        • smart-column-panel - the column customization panel in the customize drop down.
        • smart-multi-column-filter-panel - the filter panel in the filter drop down.
        • smart-sort-panel - the sort panel in the sort drop down.
        • .smart-data-view-search-box - the search panel in the search drop down.
    • .smart-kanban-body - applied to the kanban board (main view).
      • .smart-kanban-column - applied to kanban columns.
        • .smart-kanban-column-header - applied to kanban column header.
          • .smart-kanban-column-header-add - applied to the Add new task (+) button in column headers.
          • .smart-kanban-column-header-label - applied to column header labels.
          • .smart-arrow - applied to column header arrows.
        • .smart-kanban-column-content - applied to kanban column content section.
          • .smart-kanban-column-content-tasks - applied to the section containing tasks.
            • .smart-kanban-task - applied to Kanban tasks.
              • .smart-kanban-task-content - applied to the task content section.
                • .smart-kanban-task-text - applied to task text.
                • .low - applied to text of tasks with low priority.
                • .normal - applied to text of tasks with normal priority.
                • .smart-kanban-task-user - applied to the task user icon.
                • .empty - applied to the task user icon when no user has been assigned to the task.
              • .smart-kanban-task-info - applied to the task info section.
                • .smart-kanban-task-progress-container - applied to the task progress info container.
                  • .smart-kanban-task-progress - applied to the task progress bar.
                  • .smart-kanban-task-checked - applied to the task completed sub-tasks label.
                • .smart-kanban-task-due - applied to the task Due date label.
                • .overdue - applied to the task Due date label when the task is overdue (the due date has been reached).
              • .smart-kanban-task-footer - applied to the task footer.
                • .smart-kanban-task-tags - applied to the task tags list.
                  • .smart-kanban-task-tag - applied to task tags.
                • .smart-kanban-task-actions - applied to the task Actions icon (cog).
                • .smart-kanban-task-comments - applied to the task Comments icon (envelope).
          • .smart-kanban-column-content-columns - applied to the section containing sub-columns.
          • .has-tabs - applied to the section containing sub-columns when sub-columns are represented as tabs (hierarchy: 'tabs').
            • .smart-kanban-tab-strip - applied to sub-columns tab strip.
              • .smart-kanban-tab - applied to sub-columns tabs.
                • .smart-kanban-tab-label - applied to tab labels
              • .selected - selected tabs.
        • .no-sub-columns - applied to kanban column content section when there are no sub-columns.
      • .collapsed - applied to collapsed columns.
    • .swimlane - applied to swimlanes.
      • .swimlane-label - applied to swimlane labels.
    • .smart-kanban-list - applied to the Actions, Comments, and User lists.
      • .item - applied to list items.
        • .name - applied to item labels
      • .selected - applied to highlighted item.
    • .actions - applied to the Actions list.
    • .users - applied to the User list.
      • .icon - applied to user icon
    • .smart-kanban-list comments - applied to the Comments list.
      • .smart-kanban-comments - applied to the existing comments section.
        • .comment - applied to comments.
          • .comment-indent - applied to comment indent.
            • .user-icon - applied to user icon.
          • .comment-main - applied to the main section of the comment.
            • .comment-header - applied to the comment header.
              • user-name - applied to the name of the comment's author.
              • time - applied to the comment's time stamp.
              • remove-button - applied to the comment's Edit/Remove button.
            • .comment-body - applied to the comment's text
      • .smart-kanban-new-comment - applied to the new comment section.
        • textarea - applied to the New comment textarea.
        • .send - applied to the Send (add new comment) button.
• .smart-kanban-window - applied to the Kanban's edit/prompt dialog.
  • .ok - applied to the dialog's "OK" button.
  • .cancel - applied to the dialog's "Cancel" button.
• .prompt - applied to the dialog when it acts as a prompt.
• .edit - applied to the dialog when it acts as an editor.
  • .editor-label - applied to editor labels.
  • .editor - applied to editors.
  • .text-editor - applied to task text editor.
  • .tags-editor - applied to task tags editor.
  • .status-editor - applied to task status editor.
  • .swimlane-editor - applied to task swimlane editor.
  • .asignee-editor - applied to task asignee editor.
  • .progress-editor - applied to task progress editor.
  • .start-date-editor - applied to task start date editor.
  • .due-date-editor - applied to task due date editor.
  • .priority-editor - applied to task priority editor.
  • .color-editor - applied to task color editor.
  • .text-editor - applied to task text editor.
  • .new-container - applied to new sub-task section.
    • .new-subtask - applied to new subtask input.
    • .add - applied to add new subtask button.
  • .checklist-editor - applied to task sub-task (checklist) editor.

Demo

<style type="text/css">
    html,
    body,
    #kanban {
        width: 100%;
        height: 100%;
    }

    html,
    body {
        margin: 0;
    }

    #kanban {
        --jqx-kanban-header-size: 20px;
        --jqx-border: #333;
        background-color: rgba(69, 69, 69, 0.1);
    }

        #kanban .jqx-kanban-task {
            box-shadow: var(--jqx-elevation-1);
        }

        #kanban .jqx-kanban-task-text.high {
            color: orangered;
        }
</style>