Styling: Forms
Oracle® JavaScript Extension Toolkit (JET)
15.0.0
F75901-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-acrossNote: 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-inlineNote: 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-nowrapNote: 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-inlineNote: 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-nowrapNote: 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>
-