In response to the most popular feature request in the community, we’re excited to introduce Scalable Dashboards! Scalable dashboards enable you to design a single dashboard that scales to fit the size of the device you are viewing.
Creating a new dashboard will default to using a Scalable Dashboard and will prompt you for what type of device you’re targeting (which adjusts how many ‘columns’ wide the dashboard is).
After creating the dashboard, you can also adjust how many columns wide a dashboard is in the Dashboard Settings. You can switch back to the legacy ‘Reflowing’ (Tile Width) sizing approach by tapping the small link in the creation dialog or by editing the Dashboard Settings after creating the dashboard.
Converting Existing Dashboards to Scalable
Open your Dashboard Settings
Change the Sizing Approach to Scalable (Row Width)
Adjust how many columns wide you want the dashboard to be
Save the Dashboard Settings.
Scaling and Tile Header / Footer sizes
Various elements of your tiles will automatically scale as your dashboard scales. This also means that some things that were previously a ‘fixed’ size like tile headers and footers will now scale along with the size of a 1x1 tile. So if you manually adjust your column width to be a bigger number (which will shrink the size of tiles), you may want to use Themes/Styles to set a custom header or footer size.
Reference Column Sizes
Description
Columns
Phone (Portrait)
2
Phone (Landscape)
4
Tablet (Portrait)
4
Tablet (Landscape)
6
Computer (Landscape)
8
These are designed to roughly match how many tiles wide would have fit at the default Tile Size of Normal (160px). As noted above, you can always adjust the number of columns in the Dashboard Settings.
Scalable Dashboards
The Scalable Dashboards (Row Width) let you have a single dashboard that scales across various device sizes. Once you specify how many columns wide a dashboard is, the ‘canvas’ will always be that many columns wide and it the whole thing will scale up or down to fit your device.
Reflowing Dashboards
On the other hand, the legacy Reflowing Dashboards (Tile Width) let you specify the size of the tile and whenever it reaches the end of the ‘row’, the tiles flow down to the next row. The following images show how things are ‘responsive’ across different devices and reflow based on the available screen real estate:
Hi Josh,
I believe when adding the scalable feature, which looks very cool by the way, it changed the behavior of the Calendar and News Feed tiles making the font extremely small when you are using the reflowing method. I am not sure if this can be reverted back to the way the font size used to be prior to the scaling enhancement. I have included a screenshot of how it looks now, but don’t have one prior to the enhancement to illustrate how it changed but I would say it went from a font size similar to the font size of the existing device tiles to what it is now. I have looked to adjust the font size by editing it in the theme, but it looks like I can only do that for the header and the footer, not for the content.
Thanks Josh,
The base font size scales with the size of your smallest 1x1 tile. So in your case, it looks like number of columns on the screen has been increased to fit more tiles which shrinks the size of the smallest 1x1 tile (an approach often used to get ‘half-height’ tiles). So this causes the base font size to be smaller on certain tiles like the calendars and news feeds.
Feel free to skip the ‘more details’ if you’re just interested in an approach to adjust the size.
More Details (tap to expand)
Here’s a comparison of the same ‘Normal’ sized tile on the left in a Reflowing dashboard (from before this release) compared to a ‘Scalable’ dashboard set with the same number of equivalent columns on the right. There’s some minor scaling differences, but overall they’re the same.
The difference is that on the right, when the dashboard is viewed on a bigger screen, the content of the calendar tile will scale accordingly and the relative size will appear the same.
I’ve made note of the feedback and I’m thinking we could add a content size adjustment option to the calendar and news feed tiles similar to what’s available on Label Tiles and Hero Attribute Tiles. This would help accommodate preferences as to how big you’d like the content to be and covers configurations like this where more columns are displayed resulting in a smaller 1x1 tile.
In the meantime, you might consider the Custom CSS approach @James noted in the following comment:
Thank you for the great explanation. It would be great if you could add the content size adjustment option to the calendar and news feed tiles in a future release, in the meantime I will try and fool around with the custom CSS approach when time permits.
Hey quick update for anyone else that runs into this. I reviewed the post on List of working CSS code that Josh posted above and that method is super quick and easy just go to Configuration - Edit Theme and add the following custom CSS into the Custom CSS section at the bottom. This font size brought me back to where I was prior to the scalable feature.
.tile.calendar.agenda .main-content { font-size: 1.75em; }
.tile.news-feed .main-content { font-size: 1.75em; }
Thanks again Josh and James,
Spencer
I’ve changed my dash to scalable, but the font sizes for the buttons are tiny. See the pic, forgive the colours, they’re awful, in the middle of sorting that out.
Is there some custom CSS etc that I can add to increase them to something sensible? Cheers!
When you create/edit a theme (in Account > Manage Resources > Themes Tab), you can ADD/REMOVE a customization in it’s TILE STYLES area… in this case a HEADER and/or FOOTER FONT SIZE. This where you set it’s scalable size.
Scalable dashboards enable you to design a single dashboard that scales to fit the size of the device you are viewing.
