Built-in Static CSS Classes

When a form is rendered, there are a set of built-in CSS classes that are used at the Form, Pane, and Control level. You can use these CSS classes in defining custom rendering for these types of objects. The classes shown in this table are always rendered in the HTML DOM.

Built-in Static CSS Classes
CSS Class Description
TibcoForms Applied at the root node of the form, modal dialog pane, and the edit popup dialog in a grid pane.
tf-uir-enabled When the enhanced user interface is enabled, applied at the root node of the form, modal dialog pane, and the edit popup dialog in a grid pane.
tf-uir-disabled When the enhanced user interface is disabled, applied at the root node of the form, modal dialog pane, and the edit popup dialog in a grid pane.
pane Applied at the root node of each pane.
pane-vertical Applied at the root node of each vertical pane, along with the pane class.
pane-horizontal Applied at the root node of each horizontal pane, along with the pane class.
pane-tabbed Applied at the root node of each tabbed pane, along with the pane class.
pane-grid Applied at the root node of each grid pane, along with the pane class.
pane-grid-content Applied to the underlying HTML table that contains the header row and values of a grid pane.
pane-grid-content-header-row Applied to the row in the grid pane that contains column headers.
pane-grid-sortable Applied to the header row of a grid pane whose columns are sortable.
pane-grid-sort-asc Applied to the header label of a column that is currently sorted in ascending order.
pane-grid-sort-desc Applied to the header label of a column that is currently sorted in descending order.
pane-grid-content-odd-row Applied to odd rows in a grid pane
pane-grid-content-even-row Applied to even rows in a grid pane
pane-messages Applied at the root node of each messages pane, along with the pane class.
pane-record Applied at the root node of each record pane, along with the pane class.
pane-label Applied at the node that contains the label of a pane. This is nested within the node that has the pane class set.
pane-content Applied at a node that contains all the child controls and panes of the parent pane.
pane-content-left When applied at the pane level, left-aligns the contents of a pane.
component Applied at the root node of each control or pane. So each node that has a class pane-content contains 0 or more nodes with a class component.
label Applied at a node within a component that contains the label for the control or pane.
container Deprecated. Use tf-container instead of container.

Applied at a node within a component that contains the content of the control or pane.

tf-container Applied at a node within a component. Contains the content of the control or pane.
control-widget Applied on the specific element used for the control, such as an <input> element for text controls. This is a descendent of the node that contains the tf-container class.
hint Applied to the node that contains a hint for a control. This is a descendent of the node that contains the tf-container class.
control-textinput Applied at the same node as the component class for text controls.
control-textarea Applied at the same node as the component class for textarea controls.
control-date Applied at the same node as the component class for date controls.
control-time Applied at the same node as the component class for time controls.
control-datetime Applied at the same node as the component class for datetime controls.
control-checkbox Applied at the same node as the component class for checkbox controls.
control-optionlist Applied at the same node as the component class for optionlist controls.
control-radiogroup Applied at the same node as the component class for radiogroup controls.
control-image Applied at the same node as the component class for image controls.
control-label Applied at the same node as the component class for label controls.
control-hyperlink Applied at the same node as the component class for hyperlink controls.
control-duration Applied at the same node as the component class for duration controls.