I have a button on a web page that triggers a print via javascripts window.print() method. Unfortunately, in the print preview, I can still see the button that triggered the print. Is there a way I can set a property to hide this button after being clicked or hide it when I'm trying to print?

I couldn't find anything useful on the Material-UI site, nor anything on SO. I'm thinking I will have to handle this using CSS, but I'm curious if anyone else has run into this issue and if they found another way to hide a button.

Also - If necessary, I could hide my entire toolbar group, but nothing stands out to me on that documentation either.

I have a button on a web page that triggers a print via javascripts window.print() method. Unfortunately, in the print preview, I can still see the button that triggered the print. Is there a way I can set a property to hide this button after being clicked or hide it when I'm trying to print?

I couldn't find anything useful on the Material-UI site, nor anything on SO. I'm thinking I will have to handle this using CSS, but I'm curious if anyone else has run into this issue and if they found another way to hide a button.

Also - If necessary, I could hide my entire toolbar group, but nothing stands out to me on that documentation either.

• javascript
• reactjs
• material-ui

• 1 did you try @media print { .btn{dispay:hnone;} } – Khaled Garbaya Commented May 9, 2016 at 18:52
• I saw this mentioned in a few places, but I have not tried it. I want to acplish this with javascript or a material-ui attribute, but I will look into this as it seems CSS may be the only option. – curran Commented May 9, 2016 at 19:16

2 Answers 2

use the @media print query in your css to set css for printing

@media print
{    
    button
    {
        display: none !important;
    }
}

This should work. See here I added the print query to the main.css of the material.ui site

and notice the buttons that would normally show in the "Simple examples" section when I go to print are no longer there

Placing the content you want to hide within a Box with a displayPrint="none" attribute should do the trick. Example:

<Box ponent="span" displayPrint="none">
    your screen only content (this hides when printing)
</Box>

Material UI docs here.