jquery: print out hidden element

Question

hi all,

i'm using the jQuery Print Element plugin for printing but i think it's a general css issue:

how can i print out a hidden element? (with css set to display:none;)

when trying, i'm gettin only a plain sheet. is there any solution?

thanks

Answer 1

Have you included a print stylesheet?

Answer 2

As DN suggest, using a print stylesheet will work nicely. On the print stylesheet, set your css rule to #element {display:block}.

I'm looking at the jQuery.printElement Options, and there is an option overrideElementCSS. It seems to be just what you need. Here is the example code:

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

        { href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}] 

            }); 

Replace thisWillBeTheCSSUsedAsWell.css with the path to your print stylesheet which has the #element {display:block} rule.

Answer 3

mind you that jQueryUI uses {display:none !important;} the !important means you can't override it with the print stylesheet unless you also define !important (and think you also have to link to your print stylesheet first in the page header before the jQuery stuff)