@media print css

4

Maybe these questions can be called "idiot", but believe me, I need to ask this here why I have not found anywhere on the internet and who can help me will be very grateful ...

Is there any way to do 2 (two) or more "@media print" from css? For example, I made one to print a particular div, now I want to print another totally different div with other formatting settings, how would I do it using the @media print?

Asking the question, is there any way to format the div as desired before sending to print by javascript, I did not like the impression of javascript, almost nothing of what was done on the page beyond pure writing. '-'

@media print {
body * {
    visibility: hidden;
}
.noneImprime
{
    display: none;
}
#imprime, #imprime * {
    visibility: visible;
    margin-top: -160px !important;
}
#imprime
{
    width: 1100px;
}
.btn-resultado{
    display: none;
}
@page{
     size: landscape;
    }
}

Above is the code I'm using to print my div with the ID: prints, however I have another div, which in my case is the content of a modal to print, how do I print only the desired content as correctly shows above and in the same print print only the contents of my modal?  In this case every time I click the designated button it will always print the same div.

    
asked by anonymous 18.07.2016 / 16:55

1 answer

6

To format two different div's, put different classes in it and put the different properties within @media print

To test how it works before generating the javascript impression you can go to the 'More tools > Rendering settings > Emulate media > print 'from the Chrome developer tool:

Signageofthelocationofthe"Render print" option within the Google Chrome developer tool

You'll probably have to use some !important to override the default print sheet style and how you're going to do it within the print media query, it's pretty cool.

    
18.07.2016 / 17:03