Material-ui: [Dialog] Print support

[emildatcu]

I am trying to add Print functionality to a fullscreen dialog with a table inside

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

It should print all pages(rows) of the table

Current Behavior 😯

It only prints the first page (23 rows if portrait, 15 if landscape)...

Steps to Reproduce 🕹

Go to this sandbox and try to print the dialog... you'll see only one page 'printed' and that's it, even though the table has at least 2-3 pages...
https://codesandbox.io/s/x3qonjjzjw?fontsize=14

Context 🔦

I am trying to add Print functionality (window.print()) to a fullscreen dialog with a table inside, and it doesn't work. it only displays the first page of the dialog(table) and that's it. it would be useful if this 'feature' would work out of the box, without any hacks or additional code...

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.2 - latest |
| React | 16.6.3 |
| Browser | Chrome |
| TypeScript | 3.1.3 |
| etc. | |

[oliviertassinari]

The following changes should introduce a complete print support for the dialog (scroll body, scroll container and fullscreen):

--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -14,7 +14,11 @@ import Paper from '../Paper';

 export const styles = theme => ({
   /* Styles applied to the root element. */
-  root: {},
+  root: {
+    '@media print': {
+      position: 'absolute',
+    },
+  },
   /* Styles applied to the root element if `scroll="paper"`. */
   scrollPaper: {
     display: 'flex',
@@ -29,6 +33,9 @@ export const styles = theme => ({
   /* Styles applied to the container element. */
   container: {
     height: '100%',
+    '@media print': {
+      height: 'auto',
+    },
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 'none',
   },
@@ -39,6 +46,10 @@ export const styles = theme => ({
     margin: 48,
     position: 'relative',
     overflowY: 'auto', // Fix IE 11 issue, to remove at some point.
+    '@media print': {
+      overflowY: 'visible',
+      boxShadow: 'none',
+    },
   },
   /* Styles applied to the `Paper` component if `scroll="paper"`. */
   paperScrollPaper: {

@emildatcu Do you want to submit a pull request? :)

[emildatcu]

Will do.
I hope this works as intended. I've wrecked my brains trying to find a solution for this.

Thanks :)

[peetss]

@oliviertassinari thanks for the fix. You can also override the CSS like so:

import { MuiThemeProvider } from '@material-ui/core/styles';

const outerTheme = createMuiTheme({
  overrides: {
    MuiDialog: {
      root: {
        '@media print': {
          position: 'absolute',
        },
      },
       /* Styles applied to the container element. */
      container: {
        height: '100%',
        // We disable the focus ring for mouse, touch and keyboard users.
        outline: 'none',
        '@media print': {
          height: 'auto',
        },
      },
      /* Styles applied to the `Paper` component. */
      paper: {
        display: 'flex',
        flexDirection: 'column',
        margin: 48,
        position: 'relative',
        overflowY: 'auto', // Fix IE 11 issue, to remove at some point.
        '@media print': {
          overflowY: 'visible',
          boxShadow: 'none',
        },
      },
  }
}
});

And then define your render() like:

<MuiThemeProvider theme={outerTheme}> <Dialog><Dialog/> </MuiThemeProvider>

[ghoshabhi]

I have been looking for this solution for couple days now. Gold @oliviertassinari.

[oliviertassinari]

@ghoshabhi Do you mean that upgrading was enough to solve your problem?

[Karl992]

Ok, that works, but when I do this:

container: { display: "none", '@media print': { display: "block" }, '@page': { size: "auto" } }

It throws an error: Cannot read property 'addRule' of null. Is beacuse of the addition of @page.
Is there an easy fix for this?