Styling: Forms

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01


PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 7.1.0
Class(es) Description Example Usage
oj-form-control Class automatically generated by editable value components, but may be specified for html elements that desire to be styled like a component.
  <input type="text" id="street" class="oj-form-control oj-inputtext-nocomp" />
              
oj-form-control-default Place on the container element of the form component to prevent the oj-form-control-inherit class from taking effect. An example of when you would use this is if want to specify form controls within a custom layout in cells of the Table or Data Grid components.
oj-form-control-inherit Place on the container element of the form component if you want the form control to inherit the container's styles like height, border, color and background-color. An example of when you would use this is if you want the form controls to be in a fixed-size grid. The Data Grid and Table components automatically apply this class to their cells. To prevent this class from taking effect in the Data Grid and Table cells, specify the oj-form-control-default class on the desired cells.
oj-form-layout Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.
oj-form Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.
oj-form-no-dividers Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.
oj-form-control-group Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.
oj-[size]-labels-inline Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.

Use the label-edge attribute set to "start" on the oj-form-layout component.
oj-[size]-label-inline Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout custom element component and oj-label-value component.

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.
oj-[size]-labels-nowrap Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layoutcomponent.

Use the label-wrapping attribute set to "truncate" on the oj-form-layout custom element component.
oj-[size]-label-nowrap Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.
oj-[size]-form-across Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component (use direction="row").
oj-form-cols-labels-inline Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.

Use the label-edge attribute set to "start" on the oj-form-layout component.
oj-form-cols-max2 Deprecated This class was originally added for CSS based form layout. This class is being deprecated in favor of the oj-form-layout component.

Use the max-columns attribute set control the maximum number of columns desired.