Styling: Helpers

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

Description

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-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-hyphens-auto
Sets hypens: auto (Note that there are browser support limitations). This class uses the !important rule.
Example
<div class="oj-helper-hyphens-auto">long words like Antidisestablishmentarianism</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>
.oj-helper-overflow-wrap-anywhere
Sets overflow-wrap: anywhere, on browsers that don't support 'anywhere' uses 'break-word' instead. This class uses the !important rule.
Note: On browsers that don't support 'anywhere', like Safari, when using flexbox this helper class may not work without setting max-width on the parent element.
Example
<div class="oj-helper-overflow-wrap-anywhere">long long text</div>

Category: Box Sizing

Classes to set box-sizing to either border-box or content-box. These classes use the !important rule.

Classes:

.oj-helper-border-box
.oj-helper-content-box

Example
<div class="oj-helper-border-box">Hello World</div>

Category: Display

Helper classes to set display to none or inline-block. Uses !important rule. Use the oj-helper-hidden class instead of setting the global attribute hidden as the hidden attribute may get overridden by component style definitions.

Classes:

.oj-helper-hidden
.oj-helper-inline-block

Example
<div class="oj-helper-hidden">...</div>

Category: Font Variant Numeric

Classes to set font-variant-numeric values. On fonts that support tabular-nums the numbers are all the same size, allowing them to be easily lined up in columns. These classes use the !important rule.

Classes:

.oj-helper-tabular-nums
.oj-helper-proportional-nums

Example
<div class="oj-helper-tabular-nums">121</div>

Category: Justify Content

Classes that help justify the content of the element. These classes use the !important rule.

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 !important rule.

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 !important rule.

Classes:

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

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

Category: white-space

Classes to set white-space. These classes use the !important rule.

Classes:

.oj-helper-white-space-normal
.oj-helper-white-space-nowrap
.oj-helper-white-space-pre
.oj-helper-white-space-pre-wrap
.oj-helper-white-space-pre-line

Example
<div class="oj-helper-white-space-nowrap">Hello World</div>