Styling: Application Shell: Positioning

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

Version:
  • 3.2.0
Class(es) Description Example Usage
oj-applayout-fixed-top Place on a div to create a fixed top region that does not scroll when the page content scrolls. A fixed top region for an application shell can contain elements like a header or navigation bar.
<div class="oj-applayout-fixed-top">
  <header class="oj-hybrid-applayout-header">
  </header>
</div>
oj-applayout-fixed-bottom Place on a div to create a fixed bottom region that does not scroll when the page content scrolls. A fixed bottom region for an application shell can contain elements like a footer or navigation bar.
<div class="oj-applayout-fixed-bottom">
  <div class="oj-hybrid-applayout-navbar-app">
  </div>
</div>
oj-applayout-content
oj-complete
Place on a div around the main content area as a marker class to adjust the top and bottom paddings as needed when using fixed top and bottom regions within an application shell. The oj-complete marker class can be programmatically placed from within an ojModule lifecycle listener on the oj-applayout-content div to indicate a content area is ready to be shown, allowing the application to hide the content area before the paddings have been adjusted to prevent a flash of unstyled content. See the hybrid pattern demos or hybrid templates for a sample usage.
<div class="oj-applayout-content oj-complete">
  <div class="oj-hybrid-applayout-content">
  </div>
</div>