Positioning (Extended)

This component provides advanced positioning utility classes for precisely placing elements in Metro UI.

Overview

The position-ext component defines CSS classes for positioning elements in relation to their containers or other elements. These utilities are particularly useful for creating tooltips, dropdowns, popovers, and other UI components that need precise positioning.

Positioning Classes

Directional Positioning (put-*)

These classes position elements outside their containers in specific directions, using CSS transforms. The naming follows compass directions (n = north, e = east, s = south, w = west).

Class	Description
.put-n	Positions element at the top center, outside the container
.put-nw	Positions element at the top left corner, outside the container
.put-ne	Positions element at the top right corner, outside the container
.put-e	Positions element at the middle right, outside the container
.put-en	Positions element at the top right, outside the container
.put-es	Positions element at the bottom right, outside the container
.put-s	Positions element at the bottom left, inside the container
.put-sw	Positions element at the bottom center, inside the container
.put-se	Positions element at the bottom right, inside the container
.put-w	Positions element at the middle left, outside the container
.put-wn	Positions element at the top left, outside the container
.put-ws	Positions element at the bottom left, outside the container

Container Positioning (pos-*)

These classes position elements at specific locations within their containers:

Class	Description
.pos-top-left	Positions element at the top left corner of the container
.pos-top-center	Positions element at the top center of the container
.pos-top-right	Positions element at the top right corner of the container
.pos-bottom-left	Positions element at the bottom left corner of the container
.pos-bottom-center	Positions element at the bottom center of the container
.pos-bottom-right	Positions element at the bottom right corner of the container
.pos-left-center	Positions element at the middle left of the container
.pos-right-center	Positions element at the middle right of the container
.pos-center	Positions element at the center of the container

Simple Positioning

Class	Description
.put-left	Positions element at the left edge of its container
.put-right	Positions element at the right edge of its container

Responsive Variants

All of the directional positioning classes (.put-*) have responsive variants that apply at specific breakpoints. The responsive variants follow the naming pattern .{class}-{breakpoint}.

For example:

• .put-n-md - Applies north positioning on medium screens and above
• .put-e-lg - Applies east positioning on large screens and above

Where {breakpoint} can be: xs, sm, md, lg, xl, xxl, xxxl

How It Works

These positioning classes use a combination of:

1. Absolute positioning (top, right, bottom, left properties)
2. CSS transforms (translateX, translateY) for precise centering and positioning outside the container

For example, the .put-n class positions an element above its container by:

• Setting top: 0 and left: 50% to position it at the top center
• Using translateX(-50%) to center it horizontally
• Using translateY(-100%) to move it completely above the container

Usage Examples

Tooltip Positioning

<div class="position-relative">
    Hover me
    <div class="tooltip put-n">Tooltip appears above</div>
</div>

<div class="position-relative">
    Hover me
    <div class="tooltip put-e">Tooltip appears to the right</div>
</div>

Dropdown Menu Positioning

<div class="dropdown position-relative">
    <button class="dropdown-toggle">Dropdown</button>
    <ul class="dropdown-menu put-s">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

Centered Modal

<div class="modal-backdrop">
    <div class="modal-dialog pos-center">
        Modal content centered in the viewport
    </div>
</div>

Responsive Positioning

<!-- Dropdown appears below on small screens, to the right on medium screens and above -->
<div class="dropdown position-relative">
    <button class="dropdown-toggle">Dropdown</button>
    <ul class="dropdown-menu put-s put-e-md">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

Visual Guide

    put-nw    put-n    put-ne
        ┌─────────────┐
put-wn  │             │  put-en
        │             │
put-w   │  Container  │  put-e
        │             │
put-ws  │             │  put-es
        └─────────────┘
    put-s     put-sw    put-se

Best Practices

1. Parent Positioning: Ensure the parent element has position: relative for these positioning classes to work correctly.

2. Overflow Handling: Be aware that elements positioned outside their containers may be clipped if the parent has overflow: hidden.

3. Responsive Behavior: Use the responsive variants to adjust positioning based on screen size, especially for dropdowns and tooltips that might not fit on smaller screens.

4. Z-Index: Elements positioned outside their containers may need a higher z-index to appear above other content.

5. Combining with Other Utilities: These positioning classes work well with other Metro UI utilities like visibility classes (.d-none, .d-block) for creating interactive components.

Notes

• The .put-* classes are particularly useful for creating tooltips, popovers, and dropdown menus.
• The .pos-* classes are useful for positioning elements within containers, such as modal dialogs or notification badges.
• For simple positioning needs, consider using the standard position.less utilities instead.