Improving responsive mode with CSS

Contents[Hide]

1. Overview

When using a single dashboard for both very small and very large screen sizes, the responsive layout may not behave as you prefer. This article provides an example of how to customize the responsive layout for some dashboards using media queries in CSS.

Note
For general information on responsive dashboards, see the article Responsive layout dashboard mode.

2. Preparing the dashboard

Consider the following dashboard in Edit mode:

Sample dashboard in Edit mode
Sample dashboard in Edit mode

When viewing this dashboard in Responsive mode and on a large screen, you will see the following result:

Sample dashboard in a resized View mode
Sample dashboard in a resized View mode

Back in Edit mode, group each title cell with the appropriate content cell.

When viewing on a large screen, you will now see the following:

Grouped template in a resized View mode
Grouped template in a resized View mode

Indicate each title cell as a header.

When viewing on a large screen, you will now see the following: 

Grouped template with headers in a resized View mode
Grouped template with headers in a resized View mode

In comparison, on smaller screens, the resizing behavior of the dashboard works as intended.

Grouped template with headers on a smartphone
Grouped template with headers on a smartphone

Grouped template with headers on a tablet
Grouped template with headers on a tablet

3. Adding CSS and media queries

The template grid in Dundas BI uses native CSS flex-box, which allows you to use CSS media queries to change the behavior of the template cells depending on the screen size.

In our example, given the pixel widths of the cells in edit mode and from testing in view mode, additional cells are currently added to the top row with a page width above 1740px. The goal will be to adjust the template cells at certain screen widths to each take up about a third of the available width and have equal widths, producing three cells in each row rather than up to five.

For this example, we can define a CSS media query for any screen size larger than 1740px that adjusts the min-width of each template cell group to just under a third of the space (20px are subtracted to allow for the 5px spacing between the cell groups). Since this example uses template cell groups, we target the templatecell-group class, found when inspecting the page and defined in dundas.controls.GridTemplateAdornerConstants. (You could target templategrid-responsivecell instead, for example.)

By finding the layer ID(s) on your dashboard in the Properties window and referring to it in your CSS, as done below with the ID 0a1bd025-4a3f-0bec-ac72-33d81ca721f5, you could add the CSS to Dundas BI as described in White labeling the application without affecting other dashboards:

@media (min-width: 1740px) {
    #dashboardSurface.viewmode.viewmode-responsive .layer[id="0a1bd025-4a3f-0bec-ac72-33d81ca721f5"] .templatecell-group {
        min-width: calc((100% - 20px) / 3) !important
    }            
}

You can also add CSS directly within a dashboard using an HTML Label to add a style element like the following:

<style type="text/css">@media (min-width: 1740px) {
    #dashboardSurface.viewmode.viewmode-responsive .templatecell-group {
        min-width: calc((100% - 20px) / 3) !important
    }           
}</style>

 

Important
The CSS rule #dashboardSurface.viewmode.viewmode-responsive limits the scope to view mode. We do not want custom CSS to affect the template cells while editing.

4. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri