CSS styling for JavaScript views and Quickform nodes

KNIME JavaScript views and Quickform nodes support CSS styling. You can simply put CSS rules into a single string and set it as a flow variable 'customCSS' in the node configuration dialog.

To help with styling we introduced CSS classes to address certain visual elements. Here you can find a general description of these classes. Below there is an example of applying custom styles and a list of CSS classes available for each node.

Description of CSS classes

General

knime-title - view's title

knime-subtitle - view's subtitle

knime-label - text component of the labels in the view (e.g. on sectors of pie chart, or values of box plot)

Groups

knime-axis - selector to address a group of components related to an axis. One can specify the axis by combining the selector with a class knime-x or knime y. E.g. select('.knime-axis.knime-x') will address only X axis group.

  • knime-axis-label - text component of the axis label
  • knime-axis-line - line or path component of the axis
  • knime-axis-max-min - group of components related to max or min axis values
  • knime-tick - group of components related to a certain axis tick (for slider it represents pips group)
    • knime-tick-label - text component of the axis tick (for slider it represents a pip label)
    • knime-tick-line - line or path component of the axis tick (for slider it represents a pip tick)

knime-legend - group of components representing the legend

  • knime-legend-symbol - graphic component of the symbol legend (e.g. a colorful circle)
  • knime-legend-label - text component of the legend

knime-tooltip - group of components representing the tooltip. This also serves as a styling for collapsed columns in Data Explorer (when they are displayed in an extra rows), using knime-tooltip-caption and knime-tooltip-value.

  • knime-tooltip-caption - text component for the caption of tooltip
  • knime-tooltip-color - container for a color guide of tooltip
  • knime-tooltip-key - text component representing the key of tooltip
  • knime-tooltip-value - text component representing the value of tooltip

knime-tab - tab component, e.g. in Data Explorer

knime-spinner - spinner component

knime-slider - slider component

  • knime-slider-base - base of slider
  • knime-slider-handle - handle(s) of slider
  • knime-slider-connect - connect bar(s) of slider

Quickforms

knime-qf-title - title of quickform. This one is called "Label" in the node dialog, but don't mix it up with knime-qf-label

knime-qf-label - label in front of input controls (e.g. "Date", "Time" in Date&Time or "User", "Password" in Credentials)

knime-qf-input - input component. Might be used with a specificator (e.g. knime-boolean)

knime-qf-select - select component. Can be used with a specificator knime-single-line and knime-multi-line

knime-qf-button - button control.

knime-qf-tree - tree component

knime-qf-text - text of output components

knime-qf-error - element to display error messages

Table base views

knime-table - table

knime-table-control-text - text of control elements, like Search, Paging etc.

knime-table-search - search group

knime-table-paging - pagination group

knime-table-info - info group

knime-table-length - length group

knime-table-buttons - buttons group

knime-table-row - table row

knime-table-cell - table cell

knime-table-header - table header specificator

knime-table-footer - table footer specificator

Classifiers

knime-xknime-y - specifies the dimension when needed. Should be used in a combination with other classes, e.g. knime-axis

knime-boolean - type Boolean (e.g. in Boolean Input or row selection in Table View)

knime-double - type Double (e.g. in Double Input or Table Editor)

knime-integer - type Integer

knime-string - type String

knime-datetime - type Date&Time. Can be combined with the following specificators for QF:

  • knime-date - elements of the Date part
  • knime-time - elements of the Time part
  • knime-now - Now button
  • knime-timezone - elements of Timezone part

knime-image - type Image

  • knime-png - PNG image
  • knime-svg - SVG image

knime-single-line - for single-line components (text, select)

knime-multi-line - for multi-line components (text, select)

knime-editable - refers to editable data

knime-selected - refers to selected data

knime-filter - refers to filter/search elements

Containers

knime-service-header - component with control buttons (menu, selection etc.)

knime-layout-container - wrapper component for the chart

knime-svg-container - component with svg plot

knime-qf-container - wrapper container of a quickform control

knime-table-container - wrapper container of a table based view

 

Example

In this short demo we would like to customize how Bar Chart's title and tick labels look like. To do that we need to pass a string with a proper CSS code into Bar Chart node as a flow variable.

One of the easiest way to write some CSS code is by using Generic JavaScript View node. Let's open the configuration dialog and write the following code in the CSS panel of the node:

.knime-title {
	fill: green;
	font-weight: bold;
}

text.knime-tick-label {
	font-style: italic;
	font-size: 16px;
}

A very important thing here is not to forget to export the CSS code as a flow variable, we can do it in a Flow Variables tab:

Then let's connect the flow variable output of Generic JavaScript View node with the corresponding input of Bar Chart. The resulting workflow looks like this:

To apply custom styles in our Bar Chart we need to set up the customCSS flow variable:

After executing the node and opening its view we see (on the right) that the styles have been successfully applied (on the left side there is non-styled view for reference):

Default look Custom CSS applied

 

List of CSS classes per node

JavaScript

Bar Chart (JavaScript)

General: knime-title, knime-subtitle

Groups:
knime-axis, knime-axis-label, knime-axis-line, knime-axis-max-min, knime-tick, knime-tick-label, knime-tick-line
knime-legend, knime-legend-symbol, knime-legend-label
knime-tooltip, knime-tooltip-caption, knime-tooltip-color, knime-tooltip-key, knime-tooltip-value
knime-slider, knime-slider-base, knime-slider-handle, knime-slider-connect

Classifiers: knime-x, knime-y

Containers: knime-service-header, knime-layout-container, knime-svg-container

Box Plot (JavaScript)

General: knime-title, knime-subtitle, knime-label

Groups:
knime-axis, knime-axis-line, knime-tick, knime-tick-label, knime-tick-line

Classifiers: knime-x, knime-y

Containers: knime-service-header, knime-layout-container, knime-svg-container

Conditional Box Plot (JavaScript)

General: knime-title, knime-subtitle, knime-label 

Groups:
knime-axis, knime-axis-label, knime-axis-line, knime-tick, knime-tick-label, knime-tick-line

Classifiers: knime-x, knime-y

Containers: knime-service-header, knime-layout-container, knime-svg-container

Data Explorer (JavaScript)

General: knime-title, knime-subtitle, knime-label 

Groups:
knime-axis, knime-axis-line, knime-tick, knime-tick-label, knime-tick-line
knime-tooltip, knime-tooltip-caption, knime-tooltip-value
knime-tab

Table base views: knime-table, knime-table-control-text, knime-table-search, knime-table-paging, knime-table-info, knime-table-length, knime-table-buttons, knime-table-row, knime-table-cell, knime-table-header, knime-table-footer

Classifiers: knime-x, knime-y, knime-boolean, knime-double, knime-integer, knime-string, knime-image, knime-png, knime-svg, knime-single-line, knime-filter

Containers: knime-service-header, knime-table-container

Decision Tree View (JavaScript)

General: knime-title, knime-subtitle

Containers: knime-service-header, knime-layout-container, knime-svg-container

Generic JavaScript View

Containers: knime-service-header (if the settings menu is added in the code).

Lift Chart (JavaScript)

General: knime-title, knime-subtitle

Groups:
knime-axis, knime-axis-label, knime-axis-line, knime-tick, knime-tick-label, knime-tick-line
knime-legend, knime-legend-symbol, knime-legend-label

Classifiers: knime-x, knime-y

Containers: knime-service-header, knime-layout-container, knime-svg-container

Line Plot (JavaScript)

Containers: knime-service-header

Note: Line Plot does not support other CSS classes at the moment.

Network Viewer (JavaScript)

General: knime-title, knime-subtitle

Containers: knime-service-header

Note: Network Viewer cannot make use of CSS classes as it is drawn on a canvas.

OPTICS Cluster Assigner

General: knime-title, knime-subtitle, knime-label 

Groups:
knime-axis, knime-tick, knime-tick-label, knime-tick-line
knime-tooltip, knime-tooltip-value

Classifiers: knime-y, knime-selected

Containers: knime-service-header, knime-layout-container, knime-svg-container

Parallel Coordinates Plot (JavaScript)

General: knime-title, knime-subtitle, knime-label 

Groups:
knime-axis, knime-axis-label, knime-axis-line, knime-tick, knime-tick-label, knime-tick-line
knime-legend, knime-legend-symbol, knime-legend-label

Classifiers: knime-x, knime-y, knime-selected

Containers: knime-service-header, knime-layout-container, knime-svg-container

Pie/Donut Chart (JavaScript)

General: knime-title, knime-subtitle, knime-label

Groups:
knime-legend, knime-legend-symbol, knime-legend-label
knime-tooltip, knime-tooltip-caption, knime-tooltip-color, knime-tooltip-key, knime-tooltip-value

Classifiers: knime-x

Containers: knime-service-header, knime-layout-container, knime-svg-container

ROC Curve (JavaScript)

General: knime-title, knime-subtitle

Groups:
knime-axis, knime-axis-label, knime-axis-line, knime-tick, knime-tick-label, knime-tick-line
knime-legend, knime-legend-symbol, knime-legend-label
knime-tooltip, knime-tooltip-color, knime-tooltip-key, knime-tooltip-value

Classifiers: knime-x, knime-y

Containers: knime-service-header, knime-layout-container, knime-svg-container

Scatter Plot (JavaScript)

Containers: knime-service-header

Note: Line Plot does not support other CSS classes at the moment.

Scorer (JavaScript)

General: knime-title, knime-subtitle, knime-label 

Table base views: knime-table, knime-table-row, knime-table-cell, knime-table-header

Classifiers: knime-double, knime-integer, knime-string, knime-selected

Containers: knime-service-header

Stacked Area Chart (JavaScript)

General: knime-title, knime-subtitle

Groups:
knime-axis, knime-axis-label, knime-axis-line, knime-axis-max-min, knime-tick, knime-tick-label, knime-tick-line
knime-legend, knime-legend-symbol, knime-legend-label
knime-tooltip, knime-tooltip-caption, knime-tooltip-color, knime-tooltip-key, knime-tooltip-value

Classifiers: knime-x, knime-y

Containers: knime-service-header, knime-layout-container, knime-svg-container

Sunburst Chart (JavaScript)

General: knime-title, knime-subtitle, knime-label 

Groups:
knime-legend, knime-legend-symbol, knime-legend-label
knime-tooltip, knime-tooltip-color, knime-tooltip-key, knime-tooltip-value

Classifiers: knime-selected

Containers: knime-service-header, knime-layout-container, knime-svg-container

Table Editor (JavaScript)

General: knime-title, knime-subtitle

Table base views: knime-table, knime-table-control-text, knime-table-search, knime-table-paging, knime-table-info, knime-table-length, knime-table-buttons, knime-table-row, knime-table-cell, knime-table-header, knime-table-footer

Classifiers: knime-boolean, knime-double, knime-integer, knime-string, knime-datetime, knime-date, knime-time, knime-timezone, knime-image, knime-png, knime-svg, knime-single-line, knime-editable, knime-selected, knime-filter

Containers: knime-service-header, knime-table-container

Table View (JavaScript)

General: knime-title, knime-subtitle 

Table base views: knime-table, knime-table-control-text, knime-table-search, knime-table-paging, knime-table-info, knime-table-length, knime-table-buttons, knime-table-row, knime-table-cell, knime-table-header, knime-table-footer

Classifiers: knime-boolean, knime-double, knime-integer, knime-string, knime-datetime, knime-date, knime-time, knime-timezone, knime-image, knime-png, knime-svg, knime-single-line, knime-selected, knime-filter

Containers: knime-service-header, knime-table-container

Tag Cloud (JavaScript)

General: knime-title, knime-subtitle

Containers: knime-service-header

 

Quickforms

Autocomplete Text Input

Quickforms: knime-qf-title, knime-qf-input, knime-qf-error

Classifiers: knime-string, knime-single-line

Containers: knime-service-header, knime-qf-container

Boolean Input

Quickforms: knime-qf-title, knime-qf-input, knime-qf-error

Classifiers: knime-x, knime-y, knime-boolean

Containers: knime-service-header, knime-qf-container

Column Filter

Quickforms: knime-qf-title, knime-qf-select, knime-qf-button, knime-qf-error

Classifiers: knime-single-line, knime-multi-line

Containers: knime-service-header, knime-qf-container

Column Selection

Quickforms: knime-qf-title, knime-qf-select, knime-qf-error

Classifiers: knime-single-line, knime-multi-line

Containers: knime-service-header, knime-qf-container

Credentials Input

Quickforms: knime-qf-title, knime-qf-label, knime-qf-input, knime-qf-error

Classifiers: knime-string, knime-single-line

Containers: knime-service-header, knime-qf-container

Date&Time Input

Groups:
knime-spinner

Quickforms: knime-qf-title, knime-qf-label, knime-qf-input, knime-qf-select, knime-qf-button, knime-qf-error

Classifiers: knime- integer, knime-datetime, knime-date, knime-time, knime-now, knime-timezone, knime-single-line

Containers: knime-service-header, knime-qf-container

Double Input

Groups:
knime-spinner

Quickforms: knime-qf-title, knime-qf-input, knime-qf-error

Classifiers: knime-double

Containers: knime-service-header, knime-qf-container

File Chooser

Quickforms: knime-qf-title, knime-qf-tree, knime-qf-error

Containers: knime-service-header, knime-qf-container

File Download

Quickforms: knime-qf-title, knime-qf-error

Classifiers: knime-string, knime-single-line

Containers: knime-service-header, knime-qf-container

File Upload

Quickforms: knime-qf-title, knime-qf-label, knime-qf-button, knime-qf-error

Classifiers: knime-string, knime-single-line

Containers: knime-service-header, knime-qf-container

Image Output

Quickforms: knime-qf-title, knime-qf-error

Containers: knime-service-header, knime-qf-container

Integer Input

Groups:
knime-spinner

Quickforms: knime-qf-title, knime-qf-input, knime-qf-error

Classifiers: knime-integer

Containers: knime-service-header, knime-qf-container

List Box Input

Quickforms: knime-qf-title, knime-qf-input, knime-qf-error

Classifiers: knime-string, knime-multi-line

Containers: knime-service-header, knime-qf-container

Molecule String Input

Quickforms: knime-qf-title, knime-qf-error

Containers: knime-service-header, knime-qf-container

Multiple Selections

Quickforms: knime-qf-title, knime-qf-label, knime-qf-select, knime-qf-button, knime-qf-error

Classifiers: knime-single-line, knime-multi-line

Containers: knime-service-header, knime-qf-container

Range Slider Filter Definition

General: knime-label

Groups:
knime-tick, knime-tick-label, knime-tick-line
knime-tooltip, knime-tooltip-value
knime-slider, knime-slider-base, knime-slider-handle, knime-slider-connect

Quickforms: knime-qf-error

Containers: knime-service-header

Single Selection

Quickforms: knime-qf-title, knime-qf-label, knime-qf-select, knime-qf-error

Classifiers: knime-single-line

Containers: knime-service-header, knime-qf-container

Slider Input

Groups:
knime-tick, knime-tick-label, knime-tick-line
knime-tooltip, knime-tooltip-value
knime-slider, knime-slider-base, knime-slider-handle, knime-slider-connect

Quickforms: knime-qf-title, knime-qf-error

Containers: knime-service-header, knime-qf-container

String Input

Quickforms: knime-qf-title, knime-qf-input, knime-qf-error

Classifiers: knime-string, knime-single-line, knime-multi-line

Containers: knime-service-header, knime-qf-container

Text Output

Quickforms: knime-qf-title, knime-qf-text, knime-qf-error

Classifiers: knime-multi-line

Containers: knime-service-header, knime-qf-container

Value Filter

Quickforms: knime-qf-title, knime-qf-select, knime-qf-button, knime-qf-error

Classifiers: knime-single-line, knime-multi-line

Containers: knime-service-header, knime-qf-container

Value Selection

Quickforms: knime-qf-title, knime-qf-select, knime-qf-error

Classifiers: knime-single-line, knime-multi-line

Containers: knime-service-header, knime-qf-container