Open topic with navigation

TIBCO Business Studio™ - BPM Edition 5.4.0

# 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 box 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 box 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 box 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-check box | Applied at the same node as the component class for check box 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.

Did you find this helpful?

Yes No
Great!
Thanks for taking the time to give us some feedback.
Sorry about that

Why wasn't this helpful? (check all that apply)

Could not find what I was looking for
Instructions confusing or unclear
Instructions did not work

Want to tell us more?

Please select at least one option or provide details about the issue!!

Error occurred while submitting feedback.

Error2 occurred while submitting feedback.

TIBCO Business Studio™ - BPM Edition

Copyright © 2015-2023. Cloud Software Group, Inc. All Rights Reserved.