Styling: Helpers

Oracle® JavaScript Extension Toolkit (JET)
5.2.0
E97691-01

Version:
  • 5.2.0
Class(es) Description Example Usage
oj-helper-flex Standard syntax for display: flex not yet supported on all browsers. This is a convenience class to deal with the prefixing, however you must also set the standard syntax display: flex with a class or style. 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 Standard syntax for display: inline-flex not yet supported on all browsers. This is a convenience class to deal with the prefixing, however you must also set the standard syntax display: inline-flex with a class or style. 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>
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.