Styling: Labels

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Description

Style classes handling the Labels display

.oj-label-for-non-control

Place on a label element along with oj-label-nocomp when you want to style it like a JET oj-label but the label isn't associated with a JET form control, such as when you have a label for some plain text.

Deprecated:

Since	Description
`9.0.0`	This class is not supported in the Redwood nor the Alta theme, and will be removed from the JET API in a future release. Use a JET oj-label component with its label-id attribute instead.

Example

<label class="oj-label-nocomp oj-label-for-non-control">
     <!-- label text for some plain text -->
</label>

.oj-label-inline

Place on a label element along with oj-label-nocomp to inline the label with the sibling DOM element when you don't want to use the responsive design classes (e.g., oj-md-labels-inline).

Deprecated:

Since	Description
`9.0.0`	This class is not supported in the Redwood theme, and will be removed from the JET API in a future release. Use a JET oj-label-value with label-edge='start' instead.

Example

<label class="oj-label-nocomp oj-label-inline">
   <!-- label text -->
</label>

.oj-label-inline-top

Place on a label element along with oj-label-nocomp and oj-label-inline selectors to inline the label with the sibling DOM element and have zero margin-top.

Deprecated:

Since	Description
`9.0.0`	This class is not supported in the Redwood theme, and will be removed from the JET API in a future release. Use a JET oj-label-value with label-edge='start' instead.

Example

<label class="oj-label-nocomp oj-label-inline oj-label-inline-top">
   <!-- label text -->
</label>

.oj-label-nocomp

Place on a label element when it isn't a JET component but you want it to be styled like a JET oj-label.

Deprecated:

Since	Description
`9.0.0`	This class is not supported in the Redwood theme, and will be removed from the JET API in a future release. Use a JET oj-label component with its label-id attribute instead.

Example

<label class="oj-label-nocomp">
   <!-- label text -->
</label>

.oj-label-nowrap

Place on a label element along with oj-label-nocomp to have it not wrap when you don't want to use the responsive design classes (e.g., oj-md-labels-nowrap or oj-md-label-nowrap).

Example

<label class="oj-label-nocomp oj-label-nowrap">
   <!-- label text -->
</label>