Fix Extra Blank Page when printing, adminlte bug created overide, Do not include cards border on print like adminlte3 and shrink the font on print

This commit is contained in:
johnnyq
2026-08-25 16:56:07 -04:00
parent 4da086206c
commit 5cf14ee74b

View File

@@ -1124,3 +1124,66 @@ a:focus {
--lte-primary-color: #000000;
--lte-primary-color-rgb: 0, 0, 0;
}
/* --- Print ----------------------------------------------------------------
AdminLTE 3 bundled Bootstrap 4, whose print reboot shrank every printout by
declaring `@page { size: a3 }` and letting the browser scale that oversized
page down onto the real sheet - roughly 71% on A4, 73% on Letter. Bootstrap
5 dropped that block and AdminLTE 4 ships no replacement, so pages now come
out at 1:1 and read about 1.4x larger than they used to.
Deliberately NOT restoring the @page rule: modern browsers treat a CSS page
size as a paper REQUEST rather than a scale hint, so it can hand you literal
A3 output instead of shrunken A4. Scaling the root font instead keeps the
page at whatever paper is actually selected and lets the layout reflow to
its real width, which suits the wide report tables better than shrinking the
whole page ever did.
Nothing else in the app sets a root font-size, and Bootstrap, AdminLTE and
the .text-sm wrapper all size in rem, so this one line is the only knob:
raise it for larger print, lower it for smaller. At 71% of a 16px default
the app's .text-sm body text lands at ~9.9px (~7.4pt), which is what v3's
page scaling was effectively producing. */
@media print {
html {
font-size: 71%;
}
/* AdminLTE 3 zeroed Bootstrap's card border (`border: 0 solid`) and drew
the card's edge with a box-shadow instead - and Bootstrap 4's print
reboot then killed box-shadows, so a printed card had no outline at all,
just the header's own bottom rule. AdminLTE 4 gives .card a real 1px
border, keeps the shadow, and ships no print reboot, so both now print.
border-WIDTH rather than the border shorthand, so .card-outline's 3px
accent keeps its colour and can be handed its width straight back - it
is a border-top longhand and survived v3's border:0 the same way. */
.card {
border-width: 0 !important;
}
.card.card-outline {
border-top-width: 3px !important;
}
.card-footer {
border-top-width: 0 !important;
}
/* Bootstrap 4 dropped every shadow when printing; they render as grey
smudges on paper. Same rule it used, which also covers the dashboard
small-boxes rather than cards alone. */
*,
*::before,
*::after {
box-shadow: none !important;
}
/* .app-wrapper carries min-height:100vh so the layout fills the window on
screen. On paper a vh resolves against the whole SHEET while the content
box is the sheet MINUS the page margins, so the wrapper is always taller
than the area it can occupy and spills a sliver onto a second, blank
page - however short the invoice is. AdminLTE 4's own print block
rewrites this element's grid but never clears the height. */
.app-wrapper {
min-height: 0 !important;
}
}