Creating Printable Versions of Slate Dashboards

Ask the Community
2

To ensure optimal print styles for web pages, incorporate the following CSS within your style sheets:

@media print {
  /* CSS rules for print */
}

This directive specifies styles for print media. Key considerations include:

  • Set background to white.
  • Remove box shadows from containers to avoid print artifacts.
  • Hide UI controls by setting display: none; on specific IDs or classes (e.g., .sl-toggle { display: none; }).
  • Apply overflow: visible; to scrolling containers and adjust positioning if necessary.
  • Use page-break-before: always; or page-break-after: always; to control pagination.

For a live preview of print styles in Chrome, utilize the “Emulate Print Media” feature in the developer tools.

2 Likes