Absolute Positioning
The place-* classes can be used to achieve absolute element positioning, and are ideal for positioning elements within layouts. There are 9 placing classes as described in the following table.
Class
Description
place-top-left
Positions an element at the top left of its container.
place-top-center
Positions an element at the top center of its container.
place-top-right
Positions an element at the top right of its container.
place-middle-left
Positions an element at the middle left of its container.
place-middle-center
Positions an element at the middle center of its container.
place-middle-right
Positions an element at the middle right of its container.
place-bottom-left
Positions an element at the bottom left of its container.
place-bottom-center
Positions an element at the bottom center of its container.
place-bottom-right
Positions an element at the bottom right of its container.
Absolute PositioningThe place-* classes are best used within a container. WebUI provides a set of container classes that are all relatively positioned, and therefore serve as a positioning context when using the place-* classes.
The following example uses a panel container as the positioning context.
Example
place-top-center
place-middle-left
place-middle-center
place-middle-right
place-bottom-center
<div class="panel background-accent-1-light height-xl text-sm">
<div class="height-md width-md accent-1 place-top-center">
<span class="place-middle-center">place-top-center</span>
</div>
<div class="height-md width-md accent-1 place-middle-left">
<span class="place-middle-center">place-middle-left</span>
</div>
<div class="height-md width-md accent-1 place-middle-center">
<span class="place-middle-center">place-middle-center</span>
</div>
<div class="height-md width-md accent-1 place-middle-right">
<span class="place-middle-center">place-middle-right</span>
</div>
<div class="height-md width-md accent-1 place-bottom-center">
<span class="place-middle-center">place-bottom-center</span>
</div>
</div>
Fixed Positioning
The dock-* classes can be used to achieve fixed element positioning, and are ideal for positioning headers, footers, and menus. There are 9 docking classes as described in the following table.
Absolute PositioningA WebUI container is not required when using the dock-* classes for absolute positioning, since a dock-* class will take the element out of the normal content flow.
Class
Description
dock-top-left
Positions an element at the top left of the viewport.
dock-top-center
Positions an element at the top center of the viewport.
dock-top-right
Positions an element at the top right of the viewport.
dock-middle-left
Positions an element at the middle left of the viewport.
dock-middle-center
Positions an element at the middle center of the viewport.
dock-middle-right
Positions an element at the middle right of the viewport.
dock-bottom-left
Positions an element at the bottom left of the viewport.
dock-bottom-center
Positions an element at the bottom center of the viewport.
dock-bottom-right
Positions an element at the bottom right of the viewport.
<div class="form-row text-bold text-sm">
<div class="form-col-20 background-accent-1-light gap-horizontal-md">
<button type="button" class="button-sm button-accent-1" id="toggleFixedFooterPanel">
Toggle Fixed Footer Panel
</button>
</div>
<div class="panel dock-bottom-center hidden height-sm width-full accent-1-light" id="fixedFooterPanel">
<span class="place-middle-center">Fixed Footer Panal</span>
</div>
</div>
ui("#toggleFixedFooterPanel").click(function() {
ui("#fixedFooterPanel").toggle();
});
Custom Positioning
WebUI includes a number of utility classes that can be used to assist with element positioning, as listed in the following table. These classes can be used on their own or in combination with the place-* or dock-* classes.Classes
Offset
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
-40rem
place-top-right top-xs right-sm
place-middle-left left-sm
<div class="panel background-accent-1-light height-lg-xl text-sm">
<div class="place-top-right top-xs right-sm pad-sm accent-1">
<div>place-top-right top-xs right-sm</div>
</div>
<div class="place-middle-left left-sm pad-sm accent-1">
<div>place-middle-left left-sm</div>
</div>
</div>
Snap PositioningJavaScript 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.
Example<div class="container height-lg">
<div class="width-lg-xl height-md-lg border-sm border-color-muted" id="containerSnapPosition">
<div class="diamond-flat-shape" data-size="5rem" data-rotation="0"
data-class="custom-image" id="shapeSnapPosition"></div>
</div>
</div>
ui("#shapeSnapPosition").snapPosition("#containerSnapPosition", [0, -0.6], "rem");
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.
