Styling: FlexBar

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Description

Flex Bar Style classes


.oj-flex-bar-center-absolute
To absolutely center the item in the bar use the class oj-flex-bar-center-absolute instead of oj-flex-bar-middle. This uses absolute positioning along with justify-content and align-items to vertially and horizontally center the content in the bar. Note: as always with absolute positioning the height of the bar will not be affected by content in an absolutely positioned element, so you may need to set a height on the bar.
Example
<div class="oj-flex-bar">
   <div class="oj-flex-bar-start">
     <div>start</div>
   </div>
   <div class="oj-flex-bar-center-absolute">
     <div>middle</div>
   </div>
   <div class="oj-flex-bar-end">
     <div>end</div>
   </div>
</div>

Category: Flex Bar Layout

The flex bar layout supports a start/end section sized to its content and a middle section that stretches.

Classes:

.oj-flex-bar
.oj-flex-bar-start
.oj-flex-bar-middle
.oj-flex-bar-end

Example
<div class="oj-flex-bar">
   <div class="oj-flex-bar-start">
     <div>start</div>
   </div>
   <div class="oj-flex-middle">
     <div>middle</div>
   </div>
   <div class="oj-flex-bar-end">
     <div>end</div>
   </div>
</div>