Styling: Forms

Oracle® JavaScript Extension Toolkit (JET)
18.1.0
G25384-01

Version:
  • 18.1.0
Style classes handling the Forms display

Deprecated:
Since Description
7.0.1 These classes were originally added for CSS based form layout. Use the oj-form-layout component instead.
.oj-form
This class was originally added for CSS based form layout.
.oj-form-cols-labels-inline
This class was originally added for form layout column labels to be inline.
.oj-form-cols-max2
This class was originally added for form layout max columns.
.oj-form-control-group
This class was originally added for CSS based form layout to group components.
.oj-form-layout
A form layout manages the layout of labels and fields in a form. This class was originally added for CSS based form layout.
Example
<oj-form-layout id="myform>
   <oj-input-text id="f1"></oj-input-text>
</oj-form-layout>
.oj-form-no-dividers
This class was originally added for CSS based form layout with no dividers.

Category: Form laid across

This class can be placed on a form for components to be laid across.

Class template:

.oj-[size]-form-across

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Example
<oj-form class="oj-sm-form-across">
  <!-- content -->
</oj-form>

Category: Inline Label

This class can be placed on an element for inline label.

Class template:

.oj-[size]-label-inline

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Example
<oj-label class="oj-sm-label-inline">
  <!-- content -->
</oj-label>

Category: Non wrapping Label

This class can be placed on a label element for nowrap label.

Class template:

.oj-[size]-label-nowrap

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Example
<oj-label class="oj-sm-label-nowrap">
  <!-- content -->
</oj-label>

Category: Inline Labels

This class can be placed on an element for inline labels.

Class template:

.oj-[size]-labels-inline

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Example
<oj-label class="oj-sm-labels-inline">
  <!-- content -->
</oj-label>

Category: Non wrapping Labels

This class can be placed on a labels element for nowrap labels.

Class template:

.oj-[size]-labels-nowrap

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Example
<oj-label class="oj-sm-labels-nowrap">
  <!-- content -->
</oj-label>