Layout and Alignment

Wyn Enterprise offers robust layout tools to help you design organized, visually aligned dashboards with minimal manual adjustments. This article outlines how to align, distribute, resize, and overlap components using layout settings available in the menu bar, context menu, and the designer interface.

When designing dashboards, you can align multiple components at once using the Align dropdown in the menu bar. This tool becomes active when two or more components are selected.

Align Options

Align Left: Aligns components with the leftmost edge of the occupied space.
Align Center: Aligns components with the vertical center of the occupied space.
Align Right: Aligns components with the rightmost edge.
Align Top: Aligns components with the topmost edge.
Align Middle: Aligns components vertically with the middle.
Align Bottom: Aligns components with the bottommost edge.
Horizontal Average: Keeps the leftmost and rightmost components fixed and evenly spaces the others in between.
Vertical Average: Keeps the topmost and bottommost components fixed and evenly spaces the others vertically.

Example: Align Left

In a dashboard with two column charts and a pivot table, selecting all three components and choosing Align Left will align them with the leftmost component—e.g., Chart 2—so all others align to its left edge.

Example: Horizontal Average

Using Horizontal Average with three components (e.g., Chart 1, Chart 2, and a pivot table) will keep Chart 1 and the pivot table fixed, while evenly spacing Chart 2 between them.

You can also access layout tools by right-clicking selected components. These options are grouped into four categories:

1. Horizontal Align

Align Left
Align Center
Align Right

2. Vertical Align

Align Top
Align Middle
Align Bottom

3. Distribution

Horizontal Average
Vertical Average

4. Assimilation

Same Width
Same Height
Same Size

In context menu alignment, one component acts as the target, based on where you right-click. All other selected components align relative to this target.

Select all components, right-click on Chart 2, and choose Align Left from the Horizontal Align section. All components align to the left edge of Chart 2.

Example: Distribution → Horizontal Average

Right-click on any selected component and choose Horizontal Average to space components evenly. The leftmost and rightmost items remain fixed; the others are repositioned between them.

Example: Assimilation → Same Size

Right-click on the target component (e.g., a pivot table) and choose Same Size. The other components adjust to match the target’s width and height.

Note: As of Wyn version 7.0, alignment, distribution, and assimilation no longer require overlapping components.

Overlapping Components

To enable overlapping, click the Enable Overlap icon in the lower-right corner of the designer. This allows components to stack and occupy the same space with a defined z-order.

Selecting Overlapping Components

Right-click in the overlap area to access components layered below.
Use the Explorer panel to select components by name.
Adjust component order through the right-click menu or menu bar options.

Refer to the Admin Portal settings to configure the default behavior of overlapping in dashboard design.

When two or more components are selected, the Size menu becomes available in the menu bar. It allows for uniform sizing and edge alignment.

Size Options

Same Width: Matches all selected components to the width of the last selected component.
Same Height: Matches heights based on the last selected component.
Same Size: Matches both width and height.
Stretch to Align Left: Extends components to match the leftmost edge in the layout.
Stretch to Align Right: Extends components to match the rightmost edge.
Stretch to Align Top: Extends components to match the topmost edge.
Stretch to Align Bottom: Extends components to match the bottommost edge.
Swap Positions: Swaps the position of exactly two selected components.

Example: Same Height

Select three components (e.g., Pie chart, Radar chart, and Column chart), with the Pie chart selected last. Choosing Same Height resizes all charts to match the Pie chart’s height.

Example: Stretch to Align Top

Using Stretch to Align Top adjusts all selected components to align with the topmost component—e.g., the Pie chart—ensuring consistent top-edge alignment.

These options are also available via the context menu by right-clicking and navigating to the Size submenu.