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