Styling: Helpers

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Version:
  • 9.1.0
Helper Style classes.
.oj-helper-clearfix
Clears floats before the close of the element.
Example
<div class="oj-helper-clearfix>...</div>
.oj-helper-flex
This class was originally added when prefixing was needed for cross browser support, it is being deprecated because prefixing is no longer needed. It has always been documented that you must also set the standard syntax display: flex with a class or style because once all jet supported browsers support the standard syntax this class will be removed.
Deprecated:
Since Description
7.0.1 Prefixing is no longer needed.
Example
<div class="oj-helper-flex>...</div>
.oj-helper-hidden
Class to set display to none. Uses CSS !important property to override classes with higher specificity. Use this class instead of setting the global attribute hidden as the hidden attribute may get overridden by component style definitions.
Example
<div class="oj-helper-hidden">...</div>
.oj-helper-hidden-accessible
Class to help hide text from sighted users but not from screen readers. In rare cases this class may cause layout changes, but it avoids using the following problematic techniques developers often employ:
  • display: none. In theory the screen reader shouldn't read display none content (though it sometimes will anyway).
  • move the content offscreen. As of 2014, VoiceOver in particular has issues with off-screen content. Also, when tested in 2014 some browsers include this in drag and drop content, which makes the content very large.
Example
<div class="oj-helper-hidden-accessible">...</div>
.oj-helper-inline-flex
This class was originally added when prefixing was needed for cross browser support, it is being deprecated because prefixing is no longer needed. It has always been documented that you must also set the standard syntax display: inline-flex with a class or style because once all jet supported browsers support the standard syntax this class will be removed.
Deprecated:
Since Description
7.0.1 Prefixing is no longer needed.
Example
<div class="oj-helper-inline-flex>...</div>

Category: Justify Content

Classes that help justify the content of the element. These classes use the CSS !important property to override classes with higher specificity.

Classes:

.oj-helper-justify-content-flex-start
.oj-helper-justify-content-flex-end
.oj-helper-justify-content-center
.oj-helper-justify-content-space-between
.oj-helper-justify-content-space-around
.oj-helper-justify-content-right
.oj-helper-justify-content-left

Example
<div class="oj-helper-justify-content-start">...</div>

Category: Margin auto

Classes to set margin to auto. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Classes:

.oj-helper-margin-auto
.oj-helper-margin-start-auto
.oj-helper-margin-end-auto

Example
<div class="oj-helper-margin-start-auto>...</div>

Category: Text Alignment

Classes that help align text of the element. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Classes:

.oj-helper-text-align-start
.oj-helper-text-align-end
.oj-helper-text-align-left
.oj-helper-text-align-right

Example
<div class="oj-helper-text-align-start>...</div>