fix(css): resolve blank main content area when printing pages#5996
Closed
herley-shaori wants to merge 1 commit intoColorlibHQ:masterfrom
Closed
fix(css): resolve blank main content area when printing pages#5996herley-shaori wants to merge 1 commit intoColorlibHQ:masterfrom
herley-shaori wants to merge 1 commit intoColorlibHQ:masterfrom
Conversation
…ibHQ#5982) When using browser print preview on any AdminLTE v4 page, only the sidebar navigation was rendered while the main content area (cards, tables, widgets, charts, text) appeared completely blank. The root cause was that the CSS Grid layout combined with position: sticky/fixed on the sidebar and overflow: auto on the main content caused browsers to clip or hide the main content during print rendering. This fix adds @media print rules to the existing accessibility stylesheet that: - Preserve the grid layout with explicit column definitions (auto 1fr) so sidebar and main content appear side by side - Reset the sidebar to position: static with a compact 200px width, removing sticky/fixed positioning that breaks print rendering - Set overflow: visible on sidebar-wrapper, app-main, and app-content to prevent content clipping during print - Remove max-height constraints on the sidebar so all navigation items are printed without scrollable overflow - Reset app-header and app-footer to position: static for proper document flow in print output - Hide the sidebar-overlay which is not needed in print The result is both the sidebar navigation and all main content (dashboard cards, charts, chat widgets, tables, etc.) are fully visible in print preview and printed output.
✅ Deploy Preview for adminlte-v4 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
puikinsh
added a commit
that referenced
this pull request
Mar 10, 2026
Add @media print rules to reset sticky/fixed positioning and overflow constraints that caused browsers to clip main content during printing. Based on PR #5996 by @herley-shaori, rebuilt dist from current master. Co-Authored-By: Herley <herleys@xlsmart.co.id> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Member
|
Hi @herley-shaori, thank you so much for this contribution! 🙏 Great catch on the print layout issue — the root cause analysis was spot on. We've merged your SCSS changes into master (commit b0bbe0a) with a clean dist rebuild from the current codebase. The original PR's compiled Your print layout fix is now live on master. Thanks again for taking the time to diagnose and fix this! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #5982
When using browser print preview on any AdminLTE v4 page, only the sidebar navigation was rendered while the main content area (cards, tables, widgets, charts, text) appeared completely blank.
The root cause was that the CSS Grid layout combined with
position: sticky/fixedon the sidebar andoverflow: autoon the main content caused browsers to clip or hide the main content during print rendering.Changes
Added
@media printrules tosrc/scss/_accessibility.scssthat:auto 1fr) so sidebar and main content appear side by sideposition: staticwith a compact 200px width, removing sticky/fixed positioning that breaks print renderingoverflow: visibleon.sidebar-wrapper,.app-main, and.app-contentto prevent content clipping during printmax-heightconstraints on the sidebar so all navigation items are printed without scrollable overflow.app-headerand.app-footertoposition: staticfor proper document flow in print output.sidebar-overlaywhich is not needed in printBefore (sidebar only, main content blank)
The original issue — only sidebar navigation is visible in print preview:
After (sidebar + main content both visible)
Both sidebar and main content (dashboard cards, charts, widgets, etc.) are fully rendered:
Test plan