Styling: AppShellPositioning

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Description

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.


.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.
Example
<div class="oj-applayout-fixed-bottom">
 <header class="oj-hybrid-applayout-navbar-app">
 </header>
</div>
.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.
Example
<div class="oj-applayout-fixed-top">
 <header class="oj-hybrid-applayout-header">
 </header>
</div>

Category: Application Content

Optional marker classes that can be used to hide the content area of hybrid mobile applications to prevent shifting content when using fixed top or bottom regions within an application shell. The application will need to have the CSS shown in the example below and will also need to programmatically add the class to the oj-applayout-content div to indicate a content area is ready to be shown. This allows 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. Note that this logic is already in place within JET starter templates, but the application is responsible for adding in this logic and corresponding css in all other cases.

Classes:

.oj-applayout-content
.oj-complete

Example
.oj-applayout-content:not(.oj-complete) {
  visibility: hidden;
 }
<div class="oj-applayout-content oj-complete">
  <div class="oj-hybrid-applayout-content">
  </div>
</div>