Styling: ScaleAndDensity

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

.oj-density-compact

Note: This styleclass is not supported in the following themes: Alta

Compact Density enables a more compact vertical layout by reducing the height or top/bottom margins/padding of select components like buttons, form controls, and collection components. This adjustment doesn't alter font or icon sizes. The support for density was incorporated in Jet 17.
  • Default, no class needed - Large - This is the default and preferred density for Redwood applications. It is designed for lower density pages to embrace simplicity, openness, readability, and human scale.
  • oj-density-compact - Compact - reduced vertical margins and padding. Designed to increase efficiency by allowing more data to be shown above the fold without decreasing font or icon sizes.

Density classes may be placed on the html element or any 'container' element like a panel, form layout, collection, etc. If you are using Core Pack components, you must also include the class 'oj-density-dependent' on the 'container' element.

Example
<html class="oj-density-compact">
   <!-- content -->
</html>
<div class="oj-panel oj-density-compact">
   <!-- oj-components -->
</div>
<div class="oj-panel oj-density-compact oj-density-dependent">
   <!-- oj-c-components -->
</div>
.oj-density-standard

Note: This styleclass is not supported in the following themes: Alta

When working with Core Pack components, density classes may be placed on the html element or any 'container' element like a panel, form layout, collection, etc. You may also nest density classes, meaning you can go from standard to compact and back to standard density. However, when setting densities on 'container' elements, you must also include the class 'oj-density-dependent'.
Example
<html>
   <div class="oj-panel oj-density-compact oj-density-dependent">
      <!-- oj-c-components -->
      <div class="oj-panel oj-density-standard oj-density-dependent">
         <!-- oj-c-components -->
      </div>
   </div>
</html>

Category: Scale

Note: This category of style classes is not supported in the following themes: Alta

The scale determines the size of all elements including text and icons. JET supports three scales. Scaling was added in JET 12.
  • Default, no class needed - Large - This is the default and preferred scale for Redwood applications. It is designed for lower density pages to embrace simplicity, openness, readability, and human scale.
  • oj-scale-md - Medium - more compact proportions. Designed to increase efficiency by allowing more data to be shown above the fold.
  • oj-scale-sm - Small - highly compact proportions. Designed for canvas style tools with a high level of information and UI density. Small is not touch friendly and should therefore only be used on desktop applications.

Scale classes must be put on the html element. The entire page must be one of these scales – specifying different scales on a single page is not supported.

Class template:

.oj-scale-[scale-size]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [scale-size]

Value (required) Name Description
sm Small Small Scale
md Medium Medium Scale

Example
<html class="oj-scale-md">
   <!-- content -->
</html>