Material: Improve styles for @media print

[epelc]

The current styles for @media print need a bit of work. md-sidenav takes up half the screen and md-content only shows the visible area instead of the whole page. md-fab buttons are also shown which seems like it isn't necessary.

Perhaps a designer can comment but a decent solution(depending on whats in your sidenav) is to just hide sidenavs entirely for the print media query. Also perhaps show/hide-* classes for all the different media queries would be a good idea.

[DavidSouther]

I would be very pleased if this "just worked". I have a print report user story coming up, and if material styles just "handled" them that would be fantastic. On the other hand, I don't know of any place in the Material spec that mentions print styles.

[epelc]

@DavidSouther They mostly do work. But as I said the sidenav needs some work and I had to add a few styles to fix md-content only showing what you currently see.

Here's what I came up with

@media print {
    md-sidenav, .md-fab {
        display: none !important;
    }

    md-content {
        overflow: visible;
    }

    .print-full {
        page-break-inside: avoid;
    }
}

[DavidSouther]

@epelc thanks for that! I'll try it out later this week, and use those if I need them.

[no-more]

Hi,

Would it be possible to flatten tabs when printing? It would be great if we could print all tab contents at the same time while using the tab label as some kind of section title.

I'm not sure this can be done only with css, but I might be wrong.

Thanks a lot.

[ThomasBurleson]

@epelc - How about submitting a PR for improved printing styles.

[epelc]

@ThomasBurleson I'm up for a PR. It might have to wait until next week as I'm traveling/pretty busy this week though.

But would you be ok with me adding show/hide-print attributes? I think this would be helpful to easily let users decide if they want their elements to hidden for printing. Specifically I think this would be best for the sidebar as I think it's more a per app choice. For example showing the sidebar while printing works well for the docs but in my app it doesn't do too well.

Besides that I just think md-content needs overflow: visible; and possibly something else to make long dialogs work now that I think of it.

[ThomasBurleson]

@epelc - let's explore your ideas via a PR.

On Mon, Sep 7, 2015 at 6:30 PM Ed Pelc [email protected] wrote:

@ThomasBurleson https://github.com/ThomasBurleson I'm up for a PR. It
might have to wait until next week as I'm traveling/pretty busy this week
though.

But would you be ok with me adding show/hide-print attributes? I think
this would be helpful to easily let users decide if they want their
elements to hidden for printing. Specifically I think this would be best
for the sidebar as I think it's more a per app choice. For example showing
the sidebar while printing works well for the docs but in my app it doesn't
do too well.

Besides that I just think md-content needs overflow: visible; and
possibly something else to make long dialogs work now that I think of it.

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/1747#issuecomment-138392749.

[holdfenytolvaj]

Checkboxes also need extra "printing" rules, as they are almost invisible (with background-color removed) when they are checked...
A minimum rule would be:

@media print {
    md-checkbox.md-checked .md-icon:after {
        border-color: rgba(0,0,0,0.54)!important;
    }
}

but might be better with borders, although in this form, it doesn't add back the border for some reason...

@media print {
    md-checkbox.md-checked .md-icon:after {
        border-color: rgba(0,0,0,0.54)!important;
        left: 4px!important;
        top: 0px!important;
    }
    md-checkbox.md-checked .md-icon {
        border-radius: 2px!important;
        border: rgba(0,0,0,0.54) solid 2px !important;
    }
}

although it has to be considered, when the user is choosing to print background colors..

[nicgirault]

I've got this issue trying to print a form with radio buttons. The difference between checked radio button and unchecked radio button is very tight

[SimonBiggs]

If others find this by google I was able to fix for all material elements using:

@media print {
  body {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}

[philip-firstorder]

How about adding some print classes like these? https://getbootstrap.com/docs/4.1/utilities/display/#display-in-print

@media print {
  body {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .d-print-none {
    display: none !important;
  }
  .d-print-block {
    display: block !important;
  }
}

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

[Splaktar]

This was first looked into and discussed in the following PR: https://github.com/angular/material/pull/6784.

That PR was merged into another PR, https://github.com/angular/material/pull/6923, which extended the print improvements even further. These changes were merged in to AngularJS Material 1.1.0.

The most useful documentation for working with the new print styles can be found in this commit:
https://github.com/angular/material/pull/6923/commits/eb1249da5c4db0f352370227e3dd1cc84efebb74

This includes the ability to use classes like show-print, hide-print, show-print-xs, and hide-print-lg, etc.

[Splaktar]

If anyone has any additional improvements or suggestions (like the ones above), please open a new issue or PR so that we can review them separately.

[Splaktar]

I opened https://github.com/angular/material/issues/11358 to document these features.