Styling: Application Shell: Hybrid Mobile Padding

Oracle® JavaScript Extension Toolkit (JET)


  • 3.2.0
The hybrid mobile page structure does not have any inherent padding since some components need to stretch to the edge of the screen. We instead provide a set of oj-hybrid-padding classes that allow developers to easily control and ensure the consistency of the padding throughout their application.
Class(es) Description Example Usage
oj-hybrid-padding Place on an element to add padding to all sides. <div class="oj-hybrid-padding oj-hybrid-applayout-content"></div>
oj-hybrid-padding-vertical Place on an element to add vertical padding. <div class="oj-hybrid-padding-vertical oj-hybrid-applayout-content"></div>
oj-hybrid-padding-horizontal Place on an element to add horizontal padding. <div class="oj-hybrid-padding-horizontal oj-hybrid-applayout-content"></div>
oj-hybrid-padding-start Place on an element to add start padding. <div class="oj-hybrid-padding-start oj-hybrid-applayout-content"></div>
oj-hybrid-padding-end Place on an element to add end padding. <div class="oj-hybrid-padding-end oj-hybrid-applayout-content"></div>
oj-hybrid-padding-top Place on an element to add top padding. <div class="oj-hybrid-padding-top oj-hybrid-applayout-content"></div>
oj-hybrid-padding-bottom Place on an element to add bottom padding. <div class="oj-hybrid-padding-bottom oj-hybrid-applayout-content"></div>