Styling: Application Shell: Web Padding

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0

The web page structure does not have any inherent padding. We instead provide a set of oj-web-padding classes that allow developers to control and ensure the consistency of the padding throughout their application.

See Responsive Prefixes for information on what [size] means

Class(es) Description Example Usage
oj-web-padding Place on an element to add web padding to all sides at all display widths. <div class="oj-web-padding oj-web-applayout-content-nopad"></div>
oj-[size](-[only|down])-web-padding-vertical
oj-[size](-[only|down])-web-padding-top
oj-[size](-[only|down])-web-padding-bottom
oj-[size](-[only|down])-web-padding-horizontal
oj-[size](-[only|down])-web-padding-start
oj-[size](-[only|down])-web-padding-end
 Place on an element to add responsive padding. Examples
  • oj-md-down-web-padding-end: add padding on the end (right side in left to right languages) on screen widths in the small and medium range.
  • oj-lg-web-padding-horizontal: add padding on the right and left sides when the screen width is in the large range or wider.
  • oj-lg-only-web-padding-horizontal: add padding on the right and left sides when the screen width is in the large range only.
 
<div class="oj-web-applayout-content-nopad">
  <div class="oj-md-web-padding-start oj-sm-web-padding-vertical"
          style="border-right: 1px solid gray"></div>
  <div class="oj-md-web-padding-end oj-sm-web-padding-vertical"></div>
</div>