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]
-hideNote: 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-endNote: 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-startNote: 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]
-hideNote: 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-endNote: 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-startNote: 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-hideNote: 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-endNote: 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-endNote: 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>
-