Skip to main content

Enabling Auto Scale

The Dashboard Designer lets you build pages at a fixed pixel resolution. However, your users may view these pages on screens of varying sizes -- from large wall-mounted monitors to tablets and phones. The auto scale feature solves this by automatically scaling the entire dashboard canvas to fit the viewer's screen, preserving your designed layout proportions.

How Auto Scale Works​

When auto scale is enabled, Mango calculates the ratio between the dashboard's design resolution (for example, 1524 x 1068 pixels) and the available viewport size. It then applies a CSS transform to scale the entire root element up or down, keeping all components proportionally sized and positioned.

There are two key scaling behaviors:

  • Letterbox mode -- Scales the dashboard to fit within the viewport while maintaining the aspect ratio. If the viewport aspect ratio differs from the design resolution, blank space ("letterboxing") appears on the sides or top and bottom.
  • Fill mode -- Stretches the dashboard to fill the entire viewport, which may distort proportions if the aspect ratio does not match.

Enabling Auto Scale in the Dashboard Designer​

  1. Open your page in the Dashboard Designer (found under Administration > Dashboard Designer).
  2. Select the root element by clicking on an empty area of the page where no other elements are placed. This selects the main <div> container.
  3. In the Element Specific property editor on the right panel, configure the following options:
    • Scale to: Set to ma-ui-page-view to scale relative to the page view container.
    • Maintain ratio: Set to letterbox to preserve the aspect ratio (recommended) or leave empty for fill behavior.
    • Center: Check this option to center the scaled dashboard within the viewport.

Code View​

After enabling these settings, the root element in the code view will include the auto-scale attributes:

<div class="ma-designer-root"
     id="9532658d-3c6d-43d9-9ef2-c305c8407f9e"
     style="width: 1524px; height: 1068px; position: relative;"
     ma-maintain-ratio="letterbox"
     ma-center="true"
     ma-scale-to="ma-ui-page-view">
</div>

Attribute Reference​

AttributeValuesDescription
ma-scale-toma-ui-page-viewSpecifies the container element to scale relative to. Use ma-ui-page-view for the standard page view.
ma-maintain-ratioletterbox, (empty)When set to letterbox, the dashboard scales uniformly and adds blank space to preserve the aspect ratio. When empty, the dashboard stretches to fill.
ma-centertrue, falseWhen true, the scaled dashboard is centered within the viewport.

Design Tips​

  • Choose your design resolution carefully. A common choice is 1920 x 1080 (Full HD) for dashboards displayed on wall monitors, or 1024 x 768 for more compact layouts.
  • Test at multiple sizes. After enabling auto scale, resize your browser window to verify that the layout looks correct at different viewport dimensions.
  • Avoid very small text. Text that is small at the design resolution will become even harder to read when scaled down for smaller screens.
  • Use letterbox mode for dashboards with charts and diagrams where maintaining proportions is critical. Fill mode works better for simpler layouts where slight distortion is acceptable.