Sizing Dashboard Elements
In design mode you can set how much of the page each chart, table or button block takes up. This page covers resizing, the grid widths snap to, and letting xAssets size things for you.
The Twelve-Column Grid
Dashboard widths work in twelfths of the page. A chart can be a half (six columns), a third (four), a quarter (three), or the full width — but not an arbitrary pixel width.
The reason is that dashboards are viewed on very different screens. A width in pixels that looks right on a wide monitor overflows a laptop. A width in twelfths means the same layout works everywhere, and two half-width charts sit side by side whatever the screen.
Heights are not constrained the same way — a panel grows to fit what is in it, within the height you give it.
Resizing
Drag the handle at the bottom-right corner of an item. The width snaps to the nearest twelfth as you drag, so you cannot end up slightly off a column boundary.
Common arrangements:
| Result | Width |
|---|---|
| Two charts side by side | Half each |
| Three across | A third each |
| A wide table with nothing beside it | Full width |
| A column of buttons beside a chart | Quarter for the buttons, three-quarters for the chart |
Default Widths
New items are sized by what they are, which is right often enough to leave alone:
| Item | Default width |
|---|---|
| Chart | Half |
| Table | Full |
| Menu item | Quarter |
Tables default to full width because they usually have more columns than fit in half a page. Charts read well at half width, so two sit side by side.
Auto Size
Each container label carries an auto size button. It clears any width and height you have set and lets the item size itself from its content.
Use it when a panel looks wrong and you would rather start again than fiddle. It is also the quickest fix for a dashboard that has picked up awkward sizes over time.
To auto-size everything on the tab at once, hold Ctrl and click auto size. That resets every item on the current tab, which is usually faster than working through a messy dashboard one panel at a time.
Sizing Advice
- Size after arranging. Get things in the right order first — moving an item can change how its width reads against its neighbours.
- Full width for anything with many columns. A table squeezed into half a page gets a horizontal scrollbar, which people miss.
- Keep a row's heights similar. Two side-by-side panels of very different heights leave an obvious gap.
- Check a smaller screen. Twelfths behave well when the window narrows, but a dashboard with many narrow panels becomes a tall list on a laptop. If most of your users are on laptops, look at it on one.
- Save when it looks right. Sizes save with everything else, under whichever scope you choose.
Related Reading
- Design Mode — entering design mode and the save scopes
- Adding and Removing Dashboard Items
- Dashboard Layout — the underlying layout model