0

I am new to React and Material-UI and I want to print my current dialog.

The problem is that I cannot find a way to maximize my Dialog for priting (set to fullScreen) without doing it in the Browser, too. So I basically want a smaller Dialog in my Browser and for the Dialog the maximal size.

Here is my basic code in TSX:

import React, { Component} from 'react';
import { Button, Dialog } from '@material/core';

export default class MUITester extends Component {

 render(){
   return (
      <Dialog fullScreen={false}>
        <div>
          <Button onClick={() => window.print()}>
            PRINT            
          </Button>
         </div>
       </Dialog> 
     );
   }

And the corresponding css file:

@media print {
   .print {
       fullScreen=true;
       color: blue;
    }  
}

Can I solve it using css? Or do I have to use React/Material-UI?

Bugsy
  • 43
  • 1
  • 8
  • So you don't want to use the `fullScreen` prop of the Dialog component? Or what are you trying to achieve properly? – minus.273 Jan 28 '20 at 08:03
  • I'm trying to get the `fullScreen` prop to true, only when I am printing like `@media print { .print { fullScreen : true; color: blue; } } ` and in the Browser it should be false. – Bugsy Jan 28 '20 at 18:03

5 Answers5

2

I solved it! Change the classes of Dialog:

<Dialog classes={{paperFullScreen: "prePrint printDialog"}} fullScreen>

Here my css:

.prePrint {
    height: auto !important;
    max-width: 600px !important;
}

/*Print Dialog*/
@media print {

    .printDialog {
        max-width: 100% !important;
    }
}
Bugsy
  • 43
  • 1
  • 8
2

I was looking for a full-screen Dialog on mobile and a simple dialog for desktop and the below example resolved my issue, please take a look if helps.

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
    const theme = useTheme();
    const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
    return <Dialog fullScreen={fullScreen} />;
}

You can check demo on MUI official documentation.

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
0

You can set the width of your dialog like this:

<Dialog  fullWidth={true} maxWidth='md'>
    <div>
      <Button onClick={() => window.print()}>
        PRINT            
      </Button>
     </div>
    </Dialog> 

As given in the Documentation

Saif Khan
  • 484
  • 1
  • 7
  • 21
0

For printing div, which is inside dialog, use below code, and add css also

import React, { Component} from 'react';
import { Button, Dialog } from '@material/core';

export default class MUITester extends Component {

 render(){
   return (
      <Dialog classes={{paperFullScreen: "prePrint"}} fullScreen>
        <div id="DialogPrint">
           some text some text , some paragraph and so on 
         </div>
         
          <div >
              <Button onClick={() => window.print()}>
                PRINT            
              </Button>
         </div>
         
       </Dialog> 
     );
   }
}

add below code in css

.prePrint {
    height: auto !important;
    max-width: 600px !important;
}

/*Print Dialog*/
@media print {
    body * {
        visibility: hidden;
    }
    #DialogPrint,
    #DialogPrint * {
        visibility: visible;
    }
    #DialogPrint {
        position: absolute;
        left: 0;
        top: 0;
    }
}
Somnath Kadam
  • 6,051
  • 6
  • 21
  • 37
-1

You just need to add fullScreen flag to modal component in order to achieve full screen.

Like below

<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>

And if you don't want to use fullScreen, simply remove that fullScreen flag and don't need to use CSS here.

Rise
  • 1,493
  • 9
  • 17