Printing an HTML page (the FULL page!)

views:

answers:

Printing an HTML page (the FULL page!)

Hi all,

I have a web page which has many divs (listed like table rows), and the rows exceed the length of the page (within view, before you have to scroll down). I am using some JavaScript to toggle what information is displayed on my page (for example, number of rows.)

I have made a print.css file and have manaed to edit the style that is presented upon printing the page, however, only the window in view on my screen is printing (so loads of my records, which have to scroll down in the browser to view, are being left out of my printed document!!)

Does anyone have any ideas. Even when I hit print preview through FireFox and IE, it's only previewing the exact screen. Any help here is much appreciated!

+1 A:

One possible cause of problem is that some block element is positioned absolutely and has scroll bars (overflow set to auto). When printing, overflown content will be hidden. You need to disable absolute positioning in your print.css. Example of this: http://pastehtml.com/view/1bo7tje.html

It is hard to tell without example reproducing the problem. You don't need to show the whole page with all the styles. Giving the simplest example still reproducing the bug will be enough. You can even locate the problem while you simplify the code.

Athari 2010-10-28 09:36:14

Aha! The example you provided is relevant to my issue. As I am building upon an established framework, the page I am trying to print is in a frame. (so the scroll bar is located also in the frame.) How do I disable absolute positioning, I havent declared it anywhere in my custom code, but can I declare an override in my print.css. Is this what you mean?

Derek Paring 2010-10-28 09:44:16

Athari, on the example you provided, how would I make the frame print all information inside. As this is the identical problem to which I have!

Derek Paring 2010-10-28 09:59:33

In my example, you need to remove "position: absolute". If you use frames it's more tricky though. You'll have to use JavaScript to get height of the content in the frame and adjust the frame height to it. You can get frame content height using `this.contentDocument.body.offsetHeight` (syntax is different for IE, IIRC). Be aware that it works only when the frame contents are from the same domain. You won't be able to get height of the content from other domains. On the whole, frames are evil.

Athari 2010-10-28 10:09:13

Instead of removing the positioning and changing overflow to 'visible', I am simply using CSS overrides in my print.css. I am using 'position: none' and 'position: static' but still not getting anywhere. Unfortunately I cannot change the frame layout as its shipped with the enterprise product.

Derek Paring 2010-10-28 10:12:21

@DerekParing If you use frames, your only option is to fix pages with JavaScript when printing. I don't know a pure CSS solution. P.S. Please use at-sign when replying, otherwise people you reply to won't be notified. Like this: @Athari

Athari 2010-10-28 13:05:27

ansaurus

tags:

views:

answers:

Printing an HTML page (the FULL page!)

related questions