Media WebUI

Absolute Positioning

Place Positioning

The following example uses the container class and positions two elements within it.

place-top-right
place-middle-left
<div class="container info-dark height-lg-xl text-sm border-xs border-info">
  <div class="place-top-right pad-sm info">
    <div>place-top-right</div>
  </div>
  <div class="place-middle-left pad-sm info">
    <div>place-middle-left</div>
  </div>
</div>
HTML

Place Positioning Classes

The place-* classes can be used to achieve "out of document flow" element positioning relative to its nearest positioned container, and are ideal for positioning elements within layouts. There are 9 placing classes as described below.

Class Description
place-top-left Positions an element at the top left of its nearest positioned container.
place-top-center Positions an element at the top center of its nearest positioned container.
place-top-right Positions an element at the top right of its nearest positioned container.
place-middle-left Positions an element at the middle left of its nearest positioned container.
place-middle-center Positions an element at the middle center of its nearest positioned container.
place-middle-right Positions an element at the middle right of its nearest positioned container.
place-bottom-left Positions an element at the bottom left of its nearest positioned container.
place-bottom-center Positions an element at the bottom center of its nearest positioned container.
place-bottom-right Positions an element at the bottom right of its nearest positioned container.
Absolute Positioning

The place-* classes are best used within a container to restrict the area in which elements are positioned. WebUI provides a container class that is relatively positioned, and therefore serve as a positioning context when using the place-* classes. Alternatively, the relative utility class can be added to the parent element.

For more information on containers, see the Containers section.

Fixed Positioning

Dock Positioning

The following example uses the dock-bottom-center class to position a footer panel.

<div class="text-bold text-sm info-dark pad-lg border-xs border-info">
  <button type="button" class="button-sm button-info" id="toggleFixedFooterPanel">Toggle Fixed Footer Panel</button>
</div>
<div class="pad-md dock-bottom-center hidden height-sm width-full accent-1-light layer-top" id="fixedFooterPanel">
  <span class="place-middle-center">Fixed Footer Panal</span>
</div>
HTML
ui("#toggleFixedFooterPanel").click( () => {
  ui("#fixedFooterPanel").toggle();
});
JS

Dock Positioning Classes

The dock-* classes can be used to achieve "out of document flow" element positioning relative to the browser viewport, and are ideal for positioning headers, footers, and menus. There are 9 docking classes as described below.

Class Description
dock-top-left Positions an element at the top left of the browser viewport.
dock-top-center Positions an element at the top center of the browser viewport.
dock-top-right Positions an element at the top right of the browser viewport.
dock-middle-left Positions an element at the middle left of the browser viewport.
dock-middle-center Positions an element at the middle center of the browser viewport.
dock-middle-right Positions an element at the middle right of the browser viewport.
dock-bottom-left Positions an element at the bottom left of the browser viewport.
dock-bottom-center Positions an element at the bottom center of the browser viewport.
dock-bottom-right Positions an element at the bottom right of the browser viewport.
Fixed Positioning

A WebUI container is not required when using the dock-* classes, since a dock-* class will position elements relative to the browser viewport.

Custom Positioning

Positioning Adjustments

The following example uses the place-* classes for predefined positioning and then makes small adjustments using the top-xs, right-sm and left-sm utility classes.

place-top-right
top-xs
right-sm
place-middle-left
left-sm
<div class="container info-dark height-lg-xl text-sm border-xs border-info">
  <div class="place-top-right top-xs right-sm pad-sm info">
    <div>place-top-right</div>
  </div>
  <div class="place-middle-left left-sm pad-sm info">
    <div>place-middle-left</div>
  </div>
</div>
HTML

Positioning Adjustment Classes

WebUI includes a number of utility classes that can be used to assist with element positioning, as listed below. These classes can be used on their own or in combination with the place-* or dock-* classes.

Classes Size
top-initial , left-initial , bottom-initial , right-initial 0
top-xxs , left-xxs , bottom-xxs , right-xxs 0.625rem
top-minus-xxs , left-minus-xxs , bottom-minus-xxs , right-minus-xxs -0.625rem
top-xxs-xs , left-xxs-xs , bottom-xxs-xs , right-xxs-xs 0.938rem
top-minus-xxs-xs , left-minus-xxs-xs , bottom-minus-xxs-xs , right-minus-xxs-xs -0.938rem
top-xs , left-xs , bottom-xs , right-xs 1.25rem
top-minus-xs , left-minus-xs , bottom-minus-xs , right-minus-xs -1.25rem
top-xs-sm , left-xs-sm , bottom-xs-sm , right-xs-sm 1.875rem
top-minus-xs-sm , left-minus-xs-sm , bottom-minus-xs-sm , right-minus-xs-sm -1.875rem
top-sm , left-sm , bottom-sm , right-sm 2.5rem
top-minus-sm , left-minus-sm , bottom-minus-sm , right-minus-sm -2.5rem
top-sm-md , left-sm-md , bottom-sm-md , right-sm-md 3.75rem
top-minus-sm-md , left-minus-sm-md , bottom-minus-sm-md , right-minus-sm-md -3.75rem
top-md , left-md , bottom-md , right-md 5rem
top-minus-md , left-minus-md , bottom-minus-md , right-minus-md -5rem
top-md-lg , left-md-lg , bottom-md-lg , right-md-lg 7.5rem
top-minus-md-lg , left-minus-md-lg , bottom-minus-md-lg , right-minus-md-lg -7.5rem
top-lg , left-lg , bottom-lg , right-lg 10rem
top-minus-lg , left-minus-lg , bottom-minus-lg , right-minus-lg -10rem
top-lg-xl , left-lg-xl , bottom-lg-xl , right-lg-xl 15rem
top-minus-lg-xl , left-minus-lg-xl , bottom-minus-lg-xl , right-minus-lg-xl -15rem
top-xl , left-xl , bottom-xl , right-xl 20rem
top-minus-xl , left-minus-xl , bottom-minus-xl , right-minus-xl -20rem
top-xl-xxl , left-xl-xxl , bottom-xl-xxl , right-xl-xxl 30rem
top-minus-xl-xxl , left-minus-xl-xxl , bottom-minus-xl-xxl , right-minus-xl-xxl -30rem
top-xxl , left-xxl , bottom-xxl , right-xxl 40rem
top-minus-xxl , left-minus-xxl , bottom-minus-xxl , right-minus-xxl 0.625rem

Snap Positioning

JavaScript required

If more granular positioning is required, then WebUI provides the snap positioning JavaScript utility function that can be used to accurately position elements relative to any other element. In the example below, the heptagon shape is positioned relative to the top left corner of its parent element.

<div class="container height-md-lg">
  <div class="width-lg-xl height-md-lg border-sm border-muted" id="shapeContainer">
    <div class="heptagon-clip-shape width-md height-md custom-image-3" id="shapeSnapPosition"></div>
  </div>
</div>
HTML
ui("#shapeSnapPosition").snapPosition("#shapeContainer", [0, -0.6], "rem");
JS

The following example shows a second shape being positioned relative to the top left corner of the first shape's original border edge.

<div class="container height-md-lg">
  <div class="heptagon-clip-shape width-md height-md custom-image-1" id="shape1"></div>
  <div class="heptagon-clip-shape width-md height-md custom-image-2" id="shape2"></div>
</div>
HTML
ui("#shape2").snapPosition("#shape1", [1.5, 1], "rem");
JS

Utility Classes

Positioning Utility Classes

The following utility classes are provided for further flexibility.

Class Description
relative Sets the positioning of an element to relative.
fixed Sets the positioning of an element to fixed.
absolute Sets the positioning of an element to absolute.
sticky Sets the positioning of an element to sticky.