Do your Design Studio dashboards look picture perfect on screen but end up like a bad jigsaw puzzle when printed? Printing is a common feature request for dashboards and it is expected that a dashboard prints the same way it renders. Here we discuss how format printing using CSS3 media queries can be used to achieve the same in your Design Studio applications.

All Design Studio applications have a default print option. But it doesn’t have the automated ‘format printing’ that users usually look for. For example, the charts in the application are not aligned while in printing; which while viewing on screen is properly aligned. To overcome this issue, we try to achieve format printing using CSS media queries, i.e, using the print attribute to format the application while printing.

Media queries in CSS3 extend the CSS2 media type’s idea: Instead of looking for a type of device, they look at the capability of the device and adjust accordingly. In most cases, it is common to ignore the print styles altogether, but it takes relatively less effort to create something simple that can avoid users doing a screen print of the dashboard and instead give them a formatted output that they can use productively.

The below example application shows how the charts can get misaligned and lead to users taking screenshots and printing the same rather than using the print option. Also the components on the header which are not really required for a printer output also get shown wasting valuable real estate on the dashboard printout.

Format Printing using CSS

Create new File or open an existing CSS file which belongs to the dashboard and paste the below code, and you will be able to hide and align specific components while printing.

@media print {
display :none !important;
position: relative !important;
left: -30px !important;
width:101% !important;
height:90% !important;
margin: .5cm !important;
size:A3 !important;
size:landscape !important;

After we use the above media queries, we achieve the alignment of charts and hide the unwanted components in the application as shown below:

Format Printing using CSS -2

Want to know more? Click here to get in touch.

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192