Layouts

Dashboard layouts organize how widgets appear on the dashboard grid. Each dashboard state can have its own layout type, settings, and breakpoints — enabling tailored visual presentations for different IoT use cases and screen resolutions.

1. Enter dashboard edit mode by clicking the Edit mode button in the upper right corner.
2. Click the Layouts button in the upper left corner to open the layout management window.

Each dashboard state has exactly one layout type. The platform supports three: Default, SCADA, and Divider.

The Default layout is a general-purpose layout that fits most dashboards. It supports screen breakpoints for responsive design.

The SCADA layout is designed for creating SCADA HMIs (Human-Machine Interfaces). SCADA HMIs typically consist of scalable widgets called SCADA symbols. You can also combine SCADA symbols with other ThingsBoard widgets on the same layout. This layout type also supports screen breakpoints.

The legacy Divider layout splits the dashboard into two sub-layouts: left and right. You can configure the width of these sub-layouts using either a fixed pixel value or a percentage of the screen width. Most layout parameters available for the Default layout are also supported by sub-layouts. However, sub-layouts do not support breakpoints.

Each sub-layout can be configured independently with its own background, widgets, and size.

Breakpoints allow you to define different layout settings and widgets based on the screen width of the end user.

Each dashboard state has a Default breakpoint — used when no other breakpoints match the current screen resolution. You can define the following breakpoints:

Breakpoint	Min width	Max width
Desktop (xl)	1920 px	5000 px
Desktop (lg)	1280 px	1919 px
Laptop (md)	960 px	1279 px
Tablet (sm)	600 px	959 px
Mobile (xs)	—	599 px

1. Open the Manage layouts window and click the + (Add new breakpoint) button in the breakpoints table.
2. Select the breakpoint (screen resolution) from the dropdown list.
3. Optionally, copy widgets and layout settings from another breakpoint.
4. Click Add.

Click the gear icon to open the layout settings for that breakpoint.

Click the trash icon to delete a breakpoint.

When a user opens the dashboard, the appropriate breakpoint layout is automatically selected based on the screen resolution.

When editing dashboard, switch between layouts using the combobox in the top-left corner of the screen.

You can import this demo dashboard to explore how breakpoints work. Download the demo dashboard and import it into your environment.

When a new breakpoint layout is created, all widgets from the source layout are copied by reference. Changes to the widget configuration are synchronized between breakpoints, but position and size are independent per layout.

1. Right-click on the widget and select Copy reference (Ctrl+R).
2. In another breakpoint layout, right-click on empty space and select Paste reference (Ctrl+I).

In edit mode, identify a referenced widget by the Reference button in its edit panel.

To replace a reference with an independent copy, click the Reference button or right-click the widget and select Replace reference with widget copy.

A widget copy is a complete, independent copy. Changes to the copied widget do not affect the original.

1. Right-click on the widget and select Copy (Ctrl+C).
2. In another breakpoint layout, right-click on empty space and select Paste (Ctrl+V).

Click the gear icon next to a breakpoint to open the layout settings.

The dashboard grid is divided into columns that determine how many widgets fit horizontally. The default is 24 columns (minimum 10, maximum 1000).

Controls the minimum number of columns before horizontal scrolling activates. We recommend setting this value equal to or greater than the column count.

Controls spacing between widgets. Default is 10 (range: 0–50).

Controls whether the widget margin is also applied to the edges of the layout.

When enabled, all widgets fill the screen height vertically. When disabled (default), you can freely adjust widget sizes.

Customize the dashboard background color. Click the color swatch to open the color picker, select the desired color and transparency, then click Select.

Set an image as the dashboard background. Choose from the Image gallery or provide a direct link. Use the Background size mode dropdown to control how the image fills the space (e.g., Cover, Contain).

The mobile layout settings control how widgets appear on mobile devices.

Auto fill layout height — when enabled, widgets fill the mobile screen vertically.

Mobile row height — controls how tall widgets are on mobile devices. Default is 70 px (range: 5–200 px).