mirror of
https://github.com/itflow-org/itflow
synced 2026-08-26 17:35:16 +00:00
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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user