fix(css): resolve blank main content area when printing pages#5996
Open
herley-shaori wants to merge 1 commit intoColorlibHQ:masterfrom
Open
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. |
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
1 participant
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