Styling: Forms

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-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:
  • 4.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">
  <oj-label for="input">row 1</oj-label>
  <oj-input-text id="input"></oj-input-text>

  <oj-label for="input2">row 2</oj-label>
  <oj-input-text id="input2"></oj-input-text>
</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.
  <oj-label id="grouplabelid" label-id="grouplabelid">
            Shipping Address
  </oj-label>
  <div role="group" aria-labelledby="grouplabelid" 
       class="oj-form-control-group">
    <oj-label for="street" show-required>street</oj-label>
    <oj-input-text id="street" required></oj-input-text>
    <oj-label for="city" show-required>city</oj-label>
    <oj-input-text id="city" required></oj-input-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">
        <oj-label for="control1">row 1</oj-label>
      </div>
      <div class="oj-flex-item">
        <oj-input-text id="control1" value="text"></oj-input-text>
      </div>
    </div>
    <div class="oj-flex">  [etc]
    </div>
  </div>
oj-[size]-label-inline By default JET form control labels are top aligned. This class is used to say that the label in the first column are "inline", meaning left aligned (or right aligned in right to left). This class allows you to set the label to inline on an individual label instead of setting it for all labels. Note that you will need to set the appropriate width class on each column.
  <div class="oj-form">
    <div class="oj-flex oj-md-8">
      <div class="oj-flex-item">
        <oj-label for="control1" class="oj-md-label-inline">row 1 inline</oj-label>
      </div>
      <div class="oj-flex-item">
        <oj-input-text id="control1" value="text 1"></oj-input-text>
      </div>
    </div>
    <div class="oj-flex oj-md-4">
      <div class="oj-flex-item">
        <oj-label for="control1">row 2 top aligned</oj-label>
      </div>
      <div class="oj-flex-item">
        <oj-input-text id="control2" value="text 2"></oj-input-text>
      </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">
        <oj-label for="control1">row 1 col 1</oj-label>
      </div>
      <div class="oj-flex-item">
        <oj-input-text id="control1"><oj-input-text>
      </div>
      <div class="oj-flex-item">
        <oj-label for="control2">row 1 col 2</oj-label>
      </div>
      <div class="oj-flex-item">
        <oj-input-text id="control2"><oj-input-text>
      </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.