Styling: Forms

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Description

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.
Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead.
.oj-form-cols-labels-inline
This class was originally added for form layout column labels to be inline.
Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead, with label-edge='start'.
.oj-form-cols-max2
This class was originally added for form layout max columns.
Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead, with the max-columns attribute set to the maximum number of columns desired.
.oj-form-control-group
This class was originally added for CSS based form layout to group components.
Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout to group components. Use the oj-form-layout component instead.
.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.
Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead.
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.
Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout with no dividers. Use the oj-form-layout component instead.

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

Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component component instead, with direction='row'.
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

Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead. To accomplish individual label alignment within an oj-form-layout component, you would use an oj-label-value child element and set the desired label-edge on the oj-label-value component.
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

Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead.
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

Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead.
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

Deprecated:
Since Description
7.0.1 This class was originally added for CSS based form layout. Use the oj-form-layout component instead, with label-wrapping='truncate'.
Example
<oj-label class="oj-sm-labels-nowrap">
  <!-- content -->
</oj-label>