A print follow-up to 4.6.0, from @johnnyq again (#6108) — plus a printing bug that turned out to be worse than reported.
Print a page as a document — data-lte-print="plain"
Two rules in AdminLTE's print stylesheet restyle content unconditionally: the target of every external link is printed after it, and buttons are outlined in black. Both are HTML5 Boilerplate conventions, sensible when you're printing a copy of a web page — and wrong for an invoice, quote or work order that goes to a customer, where Pay online (https://pay.example.com/inv/12345?token=…) is not what anyone wants on paper.
<html lang="en" data-lte-print="plain">That turns both off. Text still prints black on white, so nothing becomes unreadable, and it works on any container if only part of the page is the document:
<div class="card" data-lte-print="plain">…the invoice…</div>Setting it from JavaScript right before window.print() works too. Hide the chrome with Bootstrap's own .d-print-none, which has worked on the sidebar and header since 4.6.0.
Note .d-print-none could not have been the opt-out here: it hides an element, and these rules restyle elements that are meant to print.
Fixes
- Every sidebar item printed inside a black box. The outline rule listed
.nav-linkalongside.btn, and the sidebar prints by design (since the 4.0.0 print fix), so a printed page came out with a black rectangle around all 85 menu items. The outline now applies to.btnonly — a button still reads as a button on paper — while nav links keep the ink-saving black-on-transparent treatment and print as ordinary text. - The FAQ was giving the advice that caused #6107. “How do I change the primary colour?” told people to override
--bs-primaryon:root, which is exactly what leaves.btn-primaryblue. It now gives the two approaches that work:$primaryin Sass, ordata-lte-primarywith the palette sheet.
Documentation
New recipe: Printing a page as a document — the attribute, scoping it to part of a page, hiding chrome, and printing from a button.
Install
npm install admin-lte@4.7.0<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.7.0/dist/css/adminlte.min.css" />
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.7.0/dist/js/adminlte.min.js"></script>Full notes: CHANGELOG
Full Changelog: v4.6.0...v4.7.0