Improving responsive mode with CSS
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.
2. Preparing the dashboard
Consider the following dashboard in Edit mode:
When viewing this dashboard in Responsive mode and on a large screen, you will see the following result:
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:
Indicate each title cell as a header.
When viewing on a large screen, you will now see the following:
In comparison, on smaller screens, the resizing behavior of the dashboard works as intended.
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>