Improve CSS for SQL code printer-friendly display (eg. print ALL code)

[rhodelta66]

Fix Print Layout for Code Blocks with max-height

Problem

When printing a page containing a <code> element with a large amount of data and a defined max-height, only a portion of the code is visible in the printed output. The scrollbar that appears on screen is not useful in printed format, resulting in incomplete code printouts.

Solution

Modified the CSS to ensure that code blocks display their complete content when printing, regardless of their max-height setting on screen. This was achieved by adjusting the print media query in sqlpage.css.

Changes Made

• Added print-specific CSS rules to override max-height restrictions during printing
• Ensured code blocks expand to show all content in print layout
• Maintained existing screen display behavior

Testing Instructions

1. Create a SQL page with a large code block (more than would fit in the default max-height)
2. View the print preview (Ctrl+P in most browsers)
3. Verify that:
   • All code content is visible in the print preview
   • No content is cut off
   • No scrollbars appear in the print version

Additional Notes

• This change only affects the print layout and does not modify the on-screen display
• The solution maintains the original responsive design principles
• No breaking changes to existing functionality

---

By improving the print layout, this change makes SQLPage more useful for documentation and sharing purposes, as users can now reliably print complete code blocks.

[rhodelta66]

I shall add some screenshots to show the browser and printer outputs..

output on web-page

output to printer

[lovasoa]

Hi ! do you have a reproduction for the initial issue ?

I do not see anything that limits the size of code blocks initially.
I just tried, the following, and as expected, the code is displayed in full without scrollbars, both on screen and in print.

Are you sure your initial problem does not come from css you added yourself in your application ?

select 'text' as component, '
# code

\```
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10
line 11
line 12
line 13
line 14
line 15
line 16
line 17
line 18
line 19
line 20
line 21
line 22
line 23
line 24
line 25
line 26
line 27
line 28
line 29
line 30
line 31
line 32
line 33
line 34
line 35
line 36
line 37
line 38
line 39
line 40
line 41
line 42
line 43
line 44
line 45
line 44
line 45
line 46
line 47
line 48
line 49
line 50
line 51
line 52
line 53
line 54
line 55
line 55
line 56
line 57
line 58
line 59
line 60
line 61
line 62
line 63
line 64
line 65
line 66
line 67
line 68
line 69
line 70
line 71
line 72
line 73
line 74
line 75
line 76
line 77
line 78
line 79
line 80
line 81
line 82
line 83
line 84
line 85
line 86
line 87
line 88
line 89
line 90
line 91
line 92
line 93
line 99
\```
' as contents_md;

and as expected the code is displayed in full:

and in print:
SQLPage.pdf

[rhodelta66]

We prefer to set the max-height of the code block when viewed in a browser, to make sure it keeps the pages neat. But we also needed to be sure that the code would be collapsed when printing.

See the example screenshot

[lovasoa]

I see ! The file to update is the one in which the original height-limiting rule was, which is not in sqlpage itself, but in the official site. I did it.

[lovasoa]

You probably copied that file into your own project. In order to fix the issue for you, you should update the file you copied.