Creating Responsive Form Layouts

Oracle JET provides form-specific style class that you can use with the Oracle JET grid system for form layout. The form layout style classes also use the Oracle JET responsive media query variables.

  • oj-form: Place on the parent of the rows to remove the normal padding found in the grid.

  • oj-form-cols and oj-form-cols-labels-inline: Display a single column on small screens, and create additional columns when there is enough space. Place on the parent of the rows, the same element where you would place oj-form.

    Use these classes for forms where you expect the user to enter input down a column. For larger screens, the form will display two or more columns, and the user will enter the input down the first column and then down the remaining columns. Use oj-form-cols to display labels in their default location above the field. Use oj-form-cols-labels-inline to display labels inline for medium or larger screens, as shown in the following image.

    The image is described in the surrounding text.

    When you specify oj-form-cols, Oracle JET calculates the width of the field to determine if another column will fit in the display. When you specify oj-form-cols-labels-inline, Oracle JET totals the field and inline label width to determine if another column will fit in the display.

    The oj-form-cols and oj-form-cols-labels-inline classes use the CSS multi-column layout technique. With this method, you can display two or more columns whenever there's enough room on the page, not just at the responsive break points. You don't have to calculate programmatically where to break the fields into columns because the CSS automatically determines how to break the content into columns. Even if the individual elements have varying heights, the CSS breaks the elements into columns of fairly even heights. For additional information about the multi-column layout technique, see http://dev.w3.org/csswg/css-multicol.

    Note:

    The CSS multi-column layout technique is not supported by all browsers. If the browser doesn't support the technique, the display will default to single column for all screen sizes.

  • oj-form-cols-max2: Use with oj-form-cols or oj-form-cols-label-inline to restrict the display to two columns. Place on the same element that you place oj-form-cols or oj-form-cols-labels-inline.

    If this class is absent, the number of columns increases to fill the size of the screen.

  • oj-size-label-inline: Show the label inline, which is on the left side of the field in left-to-right languages and the right side of the field in right-to-left languages. By default, Oracle JET is designed to be mobile first and places labels above the field.

  • oj-size-labels-inline: Use to show all labels inline. Place on the parent of the rows, the same element where you would place oj-form.

  • oj-size-label-nowrap: Use to set nowrap on a label. The label text will be truncated if it's too wide.

  • oj-size-labels-nowrap: Use to set nowrap on all labels. Place on the parent of the rows, the same element where you would place oj-form.

  • oj-form-control-group: In a stacked form, place around a group of form controls. The style class 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.

To see examples of the classes in use, consult the Oracle JET Cookbook at Form Layout for:

  • Stacking and nesting forms

  • Inline responsive forms

  • Grouping forms

  • Column spanning