Improving Responsive Mode with CSS

Contents[Hide]

1. Overview

Designing a dashboard with both very small and very large screen sizes can prove challenging when relying only on the responsive mode functionality that comes built-in with Dundas BI.

This article provides an example of how to overcome such challenges using media query in CSS.

Note
For a general introduction to the responsive mode, 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 aspect of the dashboard looks ready.

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 Query

The template grid in Dundas BI uses native CSS flex-box, which makes it very easy to use CSS media query to change the behavior of the template cells depending on the screen size. The goal of this section is to adjust the template cells to display correctly on the large screen, with equal width for each group. 

The method for locating the template cell group in the following was chosen for its simplicity; however, you can use any other script to retrieve the template cell or template cell group ID.

Important
This method requires a control in each cell group in order to retrieve a reference of the template cell group ID. In this example, these controls are the six labels with the text Title1 – Title6.

Place the following script on the Ready action of the dashboard:

var allLabels = [label1, label2, label3, label4, label5, label6];
var canvasService = this.getService("CanvasService");

//You are looking for template cell group ID. If not using groups, you can look for the template cell ID instead.
var templateCellGroupIds = allLabels.map(function (c) { return c.getTemplateCell().cellGroupId; });

templateCellGroupIds.forEach(function (groupId) {

    //Look for the template group of groupId in the DOM directly, there are one cell group per layer (including non-user layer),
    //you need to add a CSS class to all of them in order for this to work correctly.

    var cellGroups = canvasService.canvas.controlContainer.querySelectorAll(
        ".{0}[data-id='{1}']".format(dundas.controls.GridTemplateAdornerConstants.templateGridCellContainerClassName,
            groupId));

    //If you are not using template cell group, use this instead:
    //   var templateCells = canvasService.canvas.controlContainer.querySelectorAll(
    //       ".{0}[data-id='{1}']".format(dundas.controls.GridTemplateAdornerConstants.templateGridReponsiveCellClassName,
    //       cellId));

    //Add a class to each.
    cellGroups.forEach(function (c) {
        $(c).addClass("fullHDResponsiveWidthFix");
    });
}.bind(this));

Figure out the screen size at which the responsive cell group with Title6 becomes unreasonably wide. There is no way to determine this other than experimenting with different sizes. In this example, the responsive mode functionality becomes insufficient on screen widths above 1740px.

In this example, define a CSS media query for any screen size larger than 1740px that adjusts the min-width of the template cell group. In order to have a layout with three columns by two rows, calculate the width of each cell group to be a third of the screen size (include 20px to account for 5px spacing between the cell groups.

Add the following media query in the style.override.css file (for more information about the override file, refer to Dundas BI white labeling):

@media (min-width: 1740px) {
    #dashboardSurface.viewmode.viewmode-responsive .fullHDResponsiveWidthFix {
        min-width: calc((100% - 20px) / 3) !important
    }            
}
/*you may want to add more media queries to adjust font-sizes here*/

Important
Note that the CSS rule contains #dashboardSurface.viewmode.viewmode-responsive, which limits the CSS scope to the view mode. You would not want the new CSS rule 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: 7am-6pm, ET, Mon-Fri