CSS Styling Guide for JavaScript Views and Quickform Nodes


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. To help you get started we first provide some instructions on how to setup custom CSS and then provide a list of all classes for each node. Below there you can find a general description of these classes.

Setup & Example

To apply custom CSS we need a "CSS Editor" node. The configuration dialog of the node consists of three parts as can be seen in the screenshot below. At the top there is a checkbox which allows to prepend existing stylesheets. When this option is selected a already connected CSS-stylesheet can be selected in the dropdown. The content of that stylesheet will then be displayed in the CSS editor below in a grey color.

The custom CSS is inserted beneath that prepended code. When pressing CTRL + Space at the same time a new window with an autocompletion will pop up.

When the custom CSS is inserted there are two possibilities at the bottom. Its either possible to append a new flow variable or to replace an existing one. Per default the node will append a new flow variable called "css-stylesheet".

css docs figure1

To use the created custom CSS the flow variable port of the "CSS Editor" needs to be connected to the flow variable port of the view it should customize. A resulting workflow could look like this:

css docs figure2

To apply custom styles in a Bar Chart the customCSS flow variable needs to be set:

css docs figure3

In the example below the color of the title and its font weight is changed as well as the font style and size of the tick labels.

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

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

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

css docs figure4

Description of CSS classes

Below there is a description of all the CSS classes and where they are used.

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-x, knime-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

List of CSS classes per node

In the following we provide a list of all CSS classes for each 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).

Heatmap (JavaScript)

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

Groups: knime-tooltip, knime-tooltip-caption, knime-tooltip-value ,knime-double knime-axis, knime-x, knime-y, knime-tick, knime-tick-label, knime-tick-line knime-legend, knime-legend-symbol, knime-legend-label

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

Hierarchical Cluster Assigner Classes (JavaScript)

General knime-title knime-subtitle knime-axis-label

Groups knime-axis knime-x knime-y knime-tick knime-tick-label knime-tick-line

Containers knime-layout-container knime-svg-container

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

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

Network Viewer (JavaScript)

General: knime-title, knime-subtitle

Containers: knime-service-header

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

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

Tile View (JavaScript)

General: knime-title, knime-subtitle

Groups: knime-tiles, knime-tile-title, knime-tiles-rowtitle

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

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