Place Positioning

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

<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>

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.

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>

ui("#toggleFixedFooterPanel").click( () => {
  ui("#fixedFooterPanel").toggle();
});

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.

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.

<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>

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.

Snap Positioning

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>

ui("#shapeSnapPosition").snapPosition("#shapeContainer", [0, -0.6], "rem");

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>

ui("#shape2").snapPosition("#shape1", [1.5, 1], "rem");

Positioning Utility Classes

The following utility classes are provided for further flexibility.