Styling: Forms

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

Version:
  • 3.2.0
Class(es) Description Example Usage
oj-form-layout this class can be placed around a form for a form layout, in some themes it does nothing, while in others it adds borders and/or margins.
<div class="oj-form-layout">
  <div class="oj-form">
    //form content
  </div>
</div>
oj-form this class can be placed around form controls to ensure proper spacing and padding between the controls.
<div class="oj-form">
  <label for="input">row 1</label>
  <input id="input"
         data-bind="ojComponent: {component: 'ojInputText'}">

  <label for="input2">row 2</label>
  <input id="input2"
         data-bind="ojComponent: {component: 'ojInputText'}">
</div>
oj-form-no-dividers this class can be placed on the same element as oj-form-layout to create an 'inset' form. In some themes it does nothing, while in others it adds borders and/or margins.
  <div class="oj-form  oj-form-no-dividers">
    //form content
  </div>
oj-form-control-group in a stacked form this class can be placed around a group of form controls. It ensures that the correct amount of space is maintained from the last form control in the group to the next form control in the stacked layout, even if the form controls have wrapped within their container. The example to the right would be placed inside a div with 'oj-form' as seen above.
  <label id="inputgrouplabel">row</label>
  <div class="oj-form-control-group" aria-labelledby="inputgrouplabel" role="group">
    <input aria-label="this is the input1 label text"
           data-bind="ojComponent: {component: 'ojInputText', value:'text'}">
    <input aria-label="this is the input2 label text"
           data-bind="ojComponent: {component: 'ojInputText', value:'text'}">
  </div>
oj-[size]-labels-inline By default JET form control labels are top aligned. This class is used to say that the labels in the first column are "inline", meaning left aligned (or right aligned in right to left). This class allows you to set the labels to inline once instead of setting it on each label.
  <div class="oj-form oj-sm-odd-cols-12 oj-md-odd-cols-4 oj-md-labels-inline">
    <div class="oj-flex">
      <div class="oj-flex-item">
        <label for="control1">row 1</label>
      </div>
      <div class="oj-flex-item">
        <input id="control1"
               data-bind="ojComponent: {component: 'ojInputText'}">
      </div>
    </div>
    <div class="oj-flex">  [etc]
    </div>
  </div>
oj-[size]-form-across when more than one label/field pair is shown in the same row use this class to put a 'gutter' between the columns.
  <div class="oj-form oj-form-no-dividers oj-md-labels-inline oj-lg-form-across
               oj-sm-odd-cols-12 oj-md-odd-cols-4 oj-lg-odd-cols-2 oj-lg-even-cols-4">
    <div class="oj-flex">
      <div class="oj-flex-item">
        <label for="control1">row 1 col 1</label>
      </div>
      <div class="oj-flex-item">
        <input id="control1"
               data-bind="ojComponent: {component: 'ojInputText'}">
      </div>
      <div class="oj-flex-item">
        <label for="control2">row 1 col 2</label>
      </div>
      <div class="oj-flex-item">
        <input id="control2"
               data-bind="ojComponent: {component: 'ojInputText'}">
      </div>
    </div>
    <div class="oj-flex">  [etc]
    </div>
  </div>
oj-form-cols-labels-inline this will create additional columns when there is enough space for a field and inline label. In the example for oj-[size]-labels-inline above the class oj-form-cols-labels-inline would be added to the 'oj-form' div.
oj-form-cols-max2 place on the same element as oj-form-cols-labels-inline if a maximum of 2 columns is desired. This is optional, without this class the number of columns depends only on how much space is available.
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.