Styling: ResponsiveHelpers

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

Description

Responsive Helpers Style classes


Category: Hide Content by screen size and below

Hide content at the specified screen size and below.
For example, oj-md-down-hide hides content on medium screens and below (like small screens). In Redwood these classes use the !important rule.

Note that some components need to be notified when the display is toggled, in these cases the hide classes are not sufficient and <oj-bind-if> must be used.

Class template:

.oj-[size-down]-hide

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

Values for [size-down]

Value (required) Name Description
md-down Medium Down Medium and small screen size range
lg-down Large Down Large, medium, and small size range

Example
<oj-label class="oj-md-down-hide">
   <!-- content -->
</oj-label>

Category: Float Content to the end for a screen size and above

Float content the the end (to the right in left to right languages, to the left in right to left languages) at the specified screen size and above.
For example, oj-lg-float-end floats content to the end on large screens and above. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-float-end

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

Example
<div class="oj-sm-float-end">
   <!-- content -->
</div>

Category: Float Content to the start for a screen size and above

Float content the the start (to the left in left to right languages, to the right in right to left languages) at the specified screen size and above.
For example, oj-lg-float-start floats content to the start on large screens and above. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-float-start

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

Example
<div class="oj-sm-float-start">
   <!-- content -->
</div>

Category: Hide Content by screen size and above

Hide content at the specified screen size and above.
For example, oj-lg-hide hides content on large screens and above. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-hide

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

Example
<oj-label class="oj-sm-hide">
   <!-- content -->
</oj-label>

Category: Float Content to the end for a specific screen size only

Float content the the end (to the right in left to right languages, to the left in right to left languages) at the specified screen size.
For example, oj-lg-only-float-end floats content to the end only on large screens. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-only-float-end

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

Example
<div class="oj-sm-only-float-end">
   <!-- content -->
</div>

Category: Float Content to the start for a specific screen size

Float content the the start (to the left in left to right languages, to the right in right to left languages) at the specified screen size.
For example, oj-lg-only-float-start floats content to the start only on large screen widths. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-only-float-start

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

Example
<div class="oj-sm-only-float-start">
   <!-- content -->
</div>

Category: Hide Content for specific screen size only

Hide content at the specified screen size only.
For example, oj-md-only-hide hides content on medium screens. It has no effect on other screen sizes. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-only-hide

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

Example
<oj-label class="oj-sm-only-hide">
  <!-- content -->
</oj-label>

Category: Text align content to the end for a specific screen size only

Text-align content the the end (to the right in left to right languages, to the left in right to left languages) at the specified screen size.
For example, oj-lg-only-text-align-end aligns content to the end only on large screens. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-only-text-align-end

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

Example
<div class="oj-sm-only-text-align-end">
   <!-- content -->
</div>

Category: Text align to the end for a screen size and above

Text align content the the end (to the right in left to right languages, to the left in right to left languages) at the specified screen size and above.
For example, oj-lg-text-align-end aligns content to the end on large screens and above. In Redwood these classes use the !important rule.

Class template:

.oj-[size]-text-align-end

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

Example
<div class="oj-sm-text-align-end">
   <!-- content -->
</div>