Styling: ResponsiveSizing

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Description

Responsive Sizing Style classes


Category: Width by screen size

Sets the width based upon a certain screen size.
  • oj-sm-only* applies only to a small screen.
  • oj-md-only* applies only to a medium screen.
  • oj-lg-only* applies only to a large screen.

There is no oj-xl-only-*, for xl sizes use oj-xl-* instead. See oj-[size]-width-[width] class template for more information.

These classes use the !important rule.

Class template:

.oj-[size-only]-width-[width]

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

Values for [size-only]

Value (required) Name Description
sm-only Small Small screen size range only
md-only Medium Medium screen size range only
lg-only Large Large screen size range only

Values for [width]

Value (required) Name Description
1/2 1/2 width width: 50%;
1/3 1/3 width width: 33.333333%;
2/3 2/3 width width: 66.666667%;
1/4 1/4 width width: 25%;
3/4 3/4 width width: 75%;
1/5 1/5 width width: 20%;
2/5 2/5 width width: 40%;
3/5 3/5 width width: 60%;
4/5 4/5 width width: 80%;
full 100% width width: 100%;

Example
<div class="oj-sm-only-width-full oj-md-only-width-1/2">Some content</div>

Category: Width by minimum screen size

Sets the width based upon a minimum screen size.
  • oj-sm-* applies to small width and up screens.
  • oj-md-* applies to medium width and up screens.
  • oj-lg-* applies to large width and up screens.
  • oj-xl-* applies to extra large screens only.
These classes use the !important rule.

Class template:

.oj-[size]-width-[width]

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

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for [width]

Value (required) Name Description
1/2 1/2 width width: 50%;
1/3 1/3 width width: 33.333333%;
2/3 2/3 width width: 66.666667%;
1/4 1/4 width width: 25%;
3/4 3/4 width width: 75%;
1/5 1/5 width width: 20%;
2/5 2/5 width width: 40%;
3/5 3/5 width width: 60%;
4/5 4/5 width width: 80%;
full 100% width width: 100%;

Example
<div class="oj-sm-width-1/3 oj-md-width-1/2">Some content</div>