I was fiddling around with ideas in response to a thread about dashboard page layout, and hit upon the notion of displaying multiple charts at full page width in a Carousel region. Why not? It's been a while since I used the Carousel component. This really showed as I was initially scanning the available region types for some time looking for "Carousel" before realising that it was a region template that should be applied to a Static Content region...
That hurdle crossed, I set the Parent Region on the 5 chart subregions to the new Charts container, fired up the page, and found...this. Rather disappointing. However, I quickly recognised that this was principally due to the not-uncommon problem of dynamic containers (dialogs, tabs, carousels etc) being rendered before the dimensions of their JavaScript-generated content (charts, calendars, grids and the like) are available in the DOM. Having a Height of 300 pixels set in the Attributes of each chart subregion clearly wasn't having any effect. What else could be used to inform the Carousel of the required height? Would a Universal Theme height modifier class applied to the region help? Yes it would. Remove the chart height settings, and set the chart regions' CSS Classes to h340.
So there are visible charts cycling around. But the charts are a bit mixed up with the Carousel controls. Increasing the height by changing the modifier class to h360 will obviously separate the charts from the slide selector buttons at the bottom. If changing the height sorts that out, using a width modifier might untangle them from the "<" and ">" buttons at the sides. Needs to be responsive so add a percentage width setting—90% should be about right—to the CSS classes: h360 w90p. Better? Sort of.
The charts are now clear on the right with some empty space to play with, but still under the button on the left. What can be done to move them away from that edge? Add a margin? There are layout modifier classes for that too. Adding the margin-auto class will centre the chart regions inside the Carousel container.
Just needs a couple of tweaks to clean up the spacing all round, by adding a margin to the bottom of the chart subregions and some padding to the Carousel region. The final settings are:
- Chart subregions
- CSS Classes: h360 w90p margin-auto margin-bottom-lg
- Carousel container region
- CSS Classes: padding-sm padding-top-none
And it looks like this when integrated into the dashboard.
Not exactly an out-of-the-box solution, but I thought I would share it as a real-world example of how the Universal Theme utilities can be used to keep us honest and low-code rather than hacking around with custom CSS and jQuery.