Angular UI Components Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxKanban.
  • jqx-widget - applied to jqxKanban.
  • jqx-kanban - applied to jqxKanban.
  • jqx-kanban-column - applied to jqxKanban columns.
  • jqx-kanban-column-header - applied to the column headers.
  • jqx-widget-header - applied to the column headers.
  • jqx-kanban-column-header-custom-button - applied to the custom button element in the column.
  • jqx-kanban-column-container - applied to the column container elements.
  • jqx-kanban-column-header-button - applied to the button element in the column.
  • jqx-kanban-column-header-collapsed - applied to collapsed column headers.
  • jqx-kanban-column-header-title - applied to column header's title element.
  • jqx-kanban-column-header-status - applied to column header's status element.
  • jqx-kanban-item - applied to jqxKanban items.
  • jqx-widget-content - applied to jqxKanban items.
  • jqx-kanban-item-keyword - applied to jqxKanban item's tags.
  • jqx-fill-state-normal - applied to jqxKanban item's tags.
  • jqx-kanban-item-color-status - applied to jqxKanban item's status element.
  • jqx-kanban-item-color-status-rtl - applied to jqxKanban item's status element in rtl mode.
  • jqx-kanban-item-avatar - applied to jqxKanban's avatar.
  • jqx-kanban-item-avatar-rtl - applied to jqxKanban's avatar in rtl mode.
  • jqx-kanban-item-footer - applied to jqxKanban item's footer.
  • jqx-kanban-item-text - applied to jqxKanban item's text element.
  • jqx-fill-state-disabled - applied to the jqxKanban when it is disabled.
When you create a custom style with colors and backgrounds for jqxKanban, you need to do the following:
  • Add the above CSS classes related to jqxKanban
  • After each CSS class, add your theme name.
    For example:
    jqx-kanban-summer
  • To apply your custom style to jqxKanban, you need to set its 'theme' property(option) to point to your theme name string.