Styling: Helpers

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0
Class(es) Description Example Usage
oj-helper-hidden Class to set display to none. Uses !important 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.
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.
  1. display: none. In theory the screen reader shouldn't read display none content (though it sometimes will anyway).
  2. 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.
oj-helper-clearfix Clears floats before the close of the element.
oj-helper-text-align-start aligns text to the right when dir='rtl' on the hmtl element, otherwise aligns text to the left.
oj-helper-text-align-end aligns text to the left when dir='rtl' on the hmtl element, otherwise aligns text to the right.
oj-helper-text-align-left aligns text to the left. Uses !important to override classes with higher specificity.
oj-helper-text-align-right aligns text to the right. Uses !important to override classes with higher specificity.
oj-helper-justify-content-flex-start aligns flex content start. Uses !important to override classes with higher specificity.
oj-helper-justify-content-flex-end aligns flex content end. Uses !important to override classes with higher specificity.
oj-helper-justify-content-center aligns flex content center. Uses !important to override classes with higher specificity.
oj-helper-justify-content-space-between aligns flex content space between. Uses !important to override classes with higher specificity.
oj-helper-justify-content-space-around aligns flex content space around. Uses !important to override classes with higher specificity.
oj-helper-justify-content-right aligns flex content right. Uses !important to override classes with higher specificity.
oj-helper-justify-content-left aligns flex content left. Uses !important to override classes with higher specificity.
oj-helper-flex Deprecated 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. 
  <div style="display: flex"
       class="oj-helper-flex">...</div>
oj-helper-inline-flex Deprecated 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. 
  <div style="display: inline-flex"
       class="oj-helper-inline-flex">...</div>