Print issue

[twoheaded]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

An application with a large amount of content should be printed on multiple sheets

What is the current behavior?

Only first sheet is printed. Remaining content is cropped

What are the steps to reproduce?

Open Material site and press Ctrl+P or try to print the main page from browser menu. There is only one page in the preview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.0.0, Material rc0, Win10, TS 2.4.2, Chrome latest

[Lakston]

Any input on this would be appreciated because we have the same problem.

the only info I've fund about this is pretty old and concerns material1 but it might be a start, see here

edit : further research mage me found this issue on material2 : #1520

[Lakston]

I'll answer this since I found the problem, it might help some people :

in our app the problem came from our sidenav's css properties that set its height to calc(100vh - 40px . This prevented the print to detect the total height of the app and was only printing the first page. Removing this or transposing it onto another element (our <main> component in our case) the print now handles the entire app.

[Lakston]

As a side note and since this has been bumped in priorities I can suggest a fix that mirrors the one that was used in material1 :

@media print {
  .sidenav-cont {
    height: 100%;
  }
}

[mmalerba]

Closing this and opening an issue at angular/material.angular.io#333 instead. The sidenav supports this, we just need to layout the docs site so that the body is the element that scrolls in print mode.

[twoheaded]

Sorry, but I still have this problem in my application. I use the heght: 100% property on mat-sidenav-container, because I need a sticky footer when the content height is less than a screen size. Without a 100% height, printing works well, but the footer rises.