Styling: Helpers
Oracle® JavaScript Extension Toolkit (JET)
15.0.0
F75901-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>
-