Improving responsive mode with CSS

1. Overview

Designing a single dashboard for both very small and very large screen sizes can prove a challenge. This article provides an example of how to solve this for some dashboards using media queries in CSS.

3. Adding CSS and media queries

The template grid in Dundas BI uses native CSS flex-box, which makes it very easy to use CSS media queries 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):

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.