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.

[mmalerba]

@twoheaded you can use position:fixed on the footer to achieve a sticky effect

[aciccarello]

@mmalerba I think this should be reopened as it affects all applications using the side nav. The material.angular.io website is just an example of the issue.

For example see the print preview for this stackblitz (code)

[mmalerba]

If you want print to work the document needs to be the element that scrolls. The sidenav does support this, it's similar to how you set it up to auto-hide the address bar on mobile. (See the "responsive sidenav" example here: https://material.angular.io/components/sidenav/overview)

[twoheaded]

@aciccarello, thanks. I think too, that the issue closed prematurely. I really cited the material.angular.io page as an example, since I thought it was a common problem.
@mmalerba, why should the 'mat-sidenav-container' css 'height: 100%' property break the document's print behavior? I know about footer's fixed position decision, but it does not suit me.
I already wrote about the doubts about the correctness of the side-nav component architecture in this issue. And now my doubts are only confirmed.
Examples from the documentation at the moment do not work at all. And this is release candidate 2 😫

[mmalerba]

Here is an example of a sidenav with working pint: https://stackblitz.com/edit/angular-wep1jg-mhqyzw?file=app/sidenav-responsive-example.html (slightly modified from docs site example)

[twoheaded]

@mmalerba, in the example you use ccs property flex: 1 0 auto for mat-sidenav-container. Without it printing does not work either: https://stackblitz.com/edit/angular-wep1jg-niw7pf?file=app%2Fsidenav-responsive-example.css. But with this css property we have two vertical scroll bars. It looks like a duct tape...
Please, reopen the issue

[twoheaded]

Ok, example from documentation. Printing doesn't work. The issue is closed. Nice

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}