components icon indicating copy to clipboard operation
components copied to clipboard

bug(expansion-panel): Expansion panel in browser print uses the space as if expanded, even in closed state

Open Wisdomb33r opened this issue 1 month ago • 1 comments

Is this a regression?

  • [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18

Description

In Angular 18 and earlier, a closed mat-expansion-panel was using similar vertical space in the browser and in print mode (using ctrl+p on Windows machine).

In Angular 19 and 20, the vertical space of the same closed mat-expansion-panel is using the vertical space as if it was opened.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-cuvqadqx?file=src%2Fmain.ts Steps to reproduce:

  1. Open the preview in a new tab
  2. Press ctrl+p

Here a second StabkBlitz in Angular 18 : https://stackblitz.com/edit/stackblitz-starters-wrc7q5tn?file=src%2Fmain.ts Use the same steps to reproduce. Notice how the expansion-panel is using a vertical space similar to the browser display.

I've joined a screenshot with a black arrow indicating the vertical space which is taken (and should not as the expansion-panel is closed, as we can see on the left of the screen).

Image

Expected Behavior

The vertical space for the closed expansion panel in print mode should be similar to the vertical space when displayed in the browser.

Actual Behavior

The vertical space for the closed expansion panel in print mode is as if it was opened (but the content is not displayed)

Environment

  • Angular: 19 or 20 (both concerned)
  • CDK/Material: 19 or 20 (both concerned)
  • Browser(s): Edge/Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Professional.

Wisdomb33r avatar Nov 13 '25 12:11 Wisdomb33r

If anyone encounters this bug (which I doubt... who is using browser print in 2025 beside our clients ?), a simple workaround is to hide completely the non-expanded panels :

@media print {
  mat-expansion-panel:not(.mat-expanded) {
    display: none !important;
  }
}

A second less-useful workaround is to switch to another browser. Chrome/Edge have this problem, but according to my tests, Firefox does not. Which is a bit weird btw...

Wisdomb33r avatar Nov 19 '25 09:11 Wisdomb33r