window.print() is not printing the whole page

Question

I have a page screenShot

I want to print this page. On print button i am using something like this

<input id="print" type="submit" onclick="window.print();" />

But the problem is it is not printing the whole page. Like it only print that is currently in the view. When i click on the print button then till Email:tahir@7-cs.com page print. It does not print the text below the scrollbar.

textBelowScrollbar

How can i print the whole text. Like suppose i have a very big page and i am using tabs to accommodate my page. And when click on print button, then i want to include the whole page including tabs. How can i do it?

Thanks

The last time I dealt with this issue was back in IE6 (so my advice might be out of date), but back then any iframes or other elements with overflow hidden content would print only what was visible on screen - which kind of makes sense if you think about what would happen if you had side-by-side iframes with different length content. We got around it by having our print button open a child window with a print-preview version of the current page that replaced all iframes with divs and then calling `window.print()` on the preview window. — nnnnnn, Jun 01 '12 at 07:13

Ram · Accepted Answer · 2012-06-01T06:59:28.180

9

you should use a separate css file for printing the page or use css3 media queries:

<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>

using percentage values its the best option when you create a css print file.

body, html, #wrapper {
    width: 100%;
}

or in your main css file:

@media print {
      body, html, #wrapper {
          width: 100%;
      }
}

edited Jun 01 '12 at 06:59

answered Jun 01 '12 at 06:53

Ram

143,282
16
168
197

Thanks , you mean i will have to make a css file print.css. And the contents that i don't want to include in print, give ids to them and then set their display none. And after including this declaration `` on my page, when i click on print button then browser use this print.css file to print the page. Is it? – Basit Jun 01 '12 at 07:18
@Basit, yes browsers use css print stylesheets for printing the page. this way you have complete control over styles of elements. – Ram Jun 01 '12 at 07:20
1

I have a css file that is including on my page. I added these lines into my file `@media print {body, html{width: 100%;}}`. I did nothing on my page. What i understand it means print whatever in the body oh the html document? Is it? But it is still not printing the whole body, means all elements that is inside .. – Basit Jun 01 '12 at 07:36
@Basit when you set the 100% to body, make sure you set percentage values to other elements, like #sidebar 40% using large pixel values overflow the design. – Ram Jun 01 '12 at 07:40
HHmm i did one more thing. I added these lines in the css `#top, #bottom {display: none;}`. It is working. Mean file is including. What if i remove the 'width: 100%' form the css? Thanks – Basit Jun 01 '12 at 07:42
@Basit not using 'width: 100%' is not recommended, when you set the width to 100% you can style other elements according to the wrapper or body, for example setting sidebar width to `30%` means `30%` of the width of body or #wrapper. – Ram Jun 01 '12 at 07:47
Hmm. my whole content that i want to print is in the div content. So you are basically saying that i use some thing like `{body, html, #content{width: 100%}}` or use `{body, html{width:100%}}` and apply style on my div like `
`. Thanks – Basit Jun 01 '12 at 07:54
@Basit yes, you can change the values to see what makes you more satisfied with the results. you are welcome :) – Ram Jun 01 '12 at 07:59
Now i tried this `@media print {body, html{width: 100%;height: 100%;} #top, #bottom {display: none;}}`. And on my div i used this `
..
`, But the result is same. Not printing the whole document. What i am doing wrong? :( – Basit Jun 01 '12 at 08:11
its better to not using inline styles for print, you are using media queries, make sure that your browser supports media queries and also check that there is no pixel value that has been set for inner elements. – Ram Jun 01 '12 at 08:22
I think my browser is supporting media queries because if it doesn't then the `#top, #bottom{display: none}` doesn't work. HHmm yes i am using something like this `
`. Means i am using inline styling for all my elements that are in the content div and also using pixel like 135px and so on...... So it means now i will have to remove all inline styling from my elements. And i can't use pixle on my elements instead i will have to use % in the css. Am i right? – Basit Jun 01 '12 at 09:13
@Basit yes, use percentage as it makes you sure that all elements will be printed as you want in different browsers and monitors. – Ram Jun 01 '12 at 09:26
HHmm thanks one thing more. Suppose i have a page. I use style in my css like `html,body{width:100%, height:100%}`. I have divs say
and so on. Now if i set my div1 style in my css file like `#div1{width:30%; height 50%;}`. So it means i am saying that set div1 style 30% of the body. Like if 100% of body width is suppose 1000px on the monitor then it means div1 width become 300px. Am i right? – Basit Jun 01 '12 at 09:50
I think i found the problem. You guided me really well and i learned today that what is @media about :). Actually i have internal scrollbar because of which i am having this issue. http://jsfiddle.net/nAFSN/ . You will see that i am using contents inside div but with scrollbars. What i was trying to do is to print the contents of this div. I want that all the contents in this get print, but i think it is not possible? What do you say? – Basit Jun 01 '12 at 10:57
1

i glad that could help you, you can add some styles to your print section to override scrollbars http://jsfiddle.net/nAFSN/1/ – Ram Jun 01 '12 at 11:15
awsome. Simply genius :). Thanks a lot man;). Only one thing remain. When i print the document that at the very top i get link of the page and at the very bottom on the right side i get date. Is it normal? Like on my page there is no date. It get link of the address bar. Can i remove it also or it is normal? Thanks – Basit Jun 01 '12 at 11:38
you are welcome man, that data is produced by the browser, you can deselect them within browser print config section, but you cannot force other browsers to not use them, as it is a native functionality of them. – Ram Jun 01 '12 at 11:47
Where can i find this browser print config section? like i am using firefox. – Basit Jun 01 '12 at 11:49
you can call it by `command + p` on mac, and `control + p` on windows. – Ram Jun 01 '12 at 11:52
Thank you sooooooooooooooo much:). Now everything is fine.Thanks a lot man. tc ;) – Basit Jun 01 '12 at 12:09

score 3 · Answer 2 · edited Dec 15 '15 at 13:31

3

use

  body,html { margin-top:0%;
   display:block;
   height:100%;}

edited Dec 15 '15 at 13:31

ElGavilan

6,610
16
27
36

answered Dec 15 '15 at 12:17

Kariuki James

39
1

score 3 · Answer 3 · answered Aug 29 '21 at 08:53

3

using this CSS

@media print{ 
    body, html, #page-container, .scrollable-page, .ps, .panel {
        height: 100% !important;
        width: 100% !important;
        display: inline-block;
    }
}

answered Aug 29 '21 at 08:53

Tarek Hassan

29
5

score 0 · Answer 4 · answered Jun 01 '12 at 06:52

0

Try using CSS print stylesheets, have a look at google for some examples.

On why it actually doesn't print the whole page, I assume you're missing a setting on your print dialog that states how the printing will be done.

answered Jun 01 '12 at 06:52

Roberto

1,944
1
30
42

window.print() is not printing the whole page

4 Answers4

using this CSS

Linked

Related