My content in the print preview window is displaying down about 5 or 6 lines.
Since I've already dealt with height, margin & padding, I'm unsure what's keeping it down. I can't check with inspect because it's inside a print preview window. I'm just experimenting with a few things so no rush. I will post an answer if I figure it out.
JS - called from onclick();
function print1() {
window.print();
}
CSS
#media print{
body *:not(#OFP_here){
visibility: hidden;
height:0px;
margin: 0px;
padding: 0px;
}
Update: 3 lines are due to a table that gets built by JS, even though I have accounted for the table in #media.
visibility: hidden; will "hide" those elements in the sense that their contents are hidden. But the space they occupy without that rule will still appear as empty space, which I suppose is what you are referring to.
Use display: none instead, which will actually hide the affected elements and not leave any empty space.
You need to target the #page which will be what modifies the global page settings. You can read more about it here at MDN
#page
The #page CSS at-rule is used to modify some CSS properties when printing a document.
Syntax
#page {
margin: 1cm;
}
Related
I have a visual bug when rendering my website in PDF. As you can see on the screen shot there is a shift in the images. But on the html rendering this shift is not present.
the link of the website to be transformed: https://betterhost-3fadc.web.app/
<article>
<div class="container"><img
src="https://www.electrodepot.fr/fstrz/r/s/www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P939881.jpg?frz-v=2690"><img
src="https://www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P959338.jpg"><img
src="https://www.alinea.com/fstrz/r/s/www.alinea.com/dw/image/v2/BCKM_PRD/on/demandware.static/-/Sites-ali_master/default/dwb3523209/images/27339299/POUBELLE-DAYA-27339299-F-1.jpg?sw=982&sh=982&sm=fit&sfrm=png&bgcolor=eef1eb&frz-v=103"><img
src="https://cdn.sklum.com/fr/1172047/distributeur-de-savon-en-verre-ovie.jpg"><img
src="https://www.alinea.com/fstrz/r/s/www.alinea.com/dw/image/v2/BCKM_PRD/on/demandware.static/-/Sites-ali_master/default/dw32eea630/images/27258507/BROSSE-WC-SPINA-27258507-F-1.jpg?sw=982&sh=982&sm=fit&sfrm=png&bgcolor=eef1eb&frz-v=103"><img
src="https://www.electrodepot.fr/fstrz/r/s/www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P963865.jpg?frz-v=2690"><img
src="https://cdn.sklum.com/fr/1172188/gobelet-en-verre-ovie.jpg"></div>
<cactus>
Each page is in a block called article.
article {
position: relative;
display: flex;
width: 827px;
height: 1170px;
overflow: hidden;
margin: 0px;
}
The images are arranged in 2 columns via this CSS code:
.container {columns: 2;width: 50%;column-gap: 0px;height: auto;}
Web:
PDF:
You need a dedicated print style sheet to make reliable PDFs. use a media query to make a style sheet for print. In your markup have everything for one sheet of a4 in a container called something like .page. Then in your print style sheet, explore using #page to format the pdf.
in print.css
.page {
page-break-inside: avoid;
}
That should stop your layout within your class="page" container from breaking across two pages. Experiment with using real dimensions in your print style sheet to make everything fit on one page as you want. You can see what your pdf is going to look like by doing ctrl+p to see the print preview, or actually saving to pdf from chrome.
That should start you in the right direction.
EDIT: some other pointers
put this to take the default margins off when printing
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
Set your page container to nearly the size of the page you want to print
.page {
width:209mm;height:296mm;background-color:#fffffe;position:relative;border:1px solid transparent
}
I am using bootstrap and I would like to display an image, followed by some text. However, no matter what I do, the text gets bumped to the next line, even though there is plenty of room after the image. Here is the code:
<div class="splash">
<h1><img src="logo.png" style="width:120%;height:auto" class="gold"><small>text</small></h1>
</div>
I thought images were supposed to be inline by default, but just in case I added this class in my css sheet:
.gold {
display: inline;
}
Can anyone explain why this is not working?
Your problem is with the width that you manually set to 120% with inline CSS. It's taking more than the full width (100%), there's no room remaining so the text is bumped to the next line.
If you remove that piece of code or change it to something smaller, it will work as expected.
Example : https://jsbin.com/quyogodawa/edit?html,output
When I had these issues I would always go into the Dev Tools in the browser. You can then go to the CSS tab, select the area of your page and it will show you all the styles being applied to that section.
You can tweak each style, add/remove on the fly, and see it change on your screen to figure out why it's not doing what you thought it should.
Each browser has it's own dev tools, and you access them by pressing F12.
Try changing your width and height values:
.gold {
display: inline;
width: auto;
height: 100%;
}
I think the fact that you're setting width to be 120% is forcing the small text to take a new line
Appears to be issues with my own .splash class, things work normally when I remove it. Not really sure why it would cause an issue though:
.splash {
font-family: Ubuntu, sans-serif;
margin-bottom: 20px;
}
I had big trouble with printing from Firefox (any version, mine is 16.0.2, but even Aurora dev builds did the same).
When printing the page, Shrink to fit in the Print preview doesn't work. Only way, how to fit the page onto the paper is selecting Zoom 70% in the same dialog.
Other problem:
it prints only first page.
What to do?
I needed to adapt the CSS file for printing, so I've done one. It works flawlessly anywhere, but not in Firefox. What was the problem?
First I've tried specifying Width and height for BODY and HTML in the print.css file. Than margins, etc.
Later I figured out what was the problem:
standard CSS file had the following in it:
body {
...
overflow-x: hidden;
overflow-y: scroll;
}
So I've added the following into the print.css file:
body {
overflow-x: visible;
overflow-y: visible;
}
I guess, if you had only overflow specified in the CSS, not -x & -y, you would need to specify only overflow:visible in the print.css file.
Printing from Firefox works now as it should. I just thought, that this may help somebody, who has strange printing behavior happening in Firefox.
In addition to the Kokesh's answer, some times attribute
display: table
generates this problem too. So you need change it to 'block' or another that fits to your requeriments.
I tried the fixes suggested in other answers but they didn't solve the problem for me. After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
As I have a big floated container I thought I'd give it a try. So, I made a mix from the other answers and this article and came up with this:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
So basically:
Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
I've tried everything I know but am at a loss.
In print.css, set overflow: visible instead of overflow: auto on div#content. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
I know this is an old question but here's another, newer way this can happen.
Check if you're using display: flex; on the clipped element. It was the problem for me, setting it to block fixed it.
I found that setting display: inline on container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display block or inline-block. For me it was cutting off text, and setting it to inline circumvented that. This also makes width and height irrelevant for the offending container div; which I have found to be a nuisance when printing.
#media print {
.container {
display: inline;
}
}
Here is a great article that helped me with this solution.
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
Are you already using the print value for the media attribute for your stylesheet like
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-before attributes for elements that you don't want to break.
I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.
In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.
I'm having a different problem in IE8 now. UGH!
if overflow:visible; not works, try overflow-y:visible;
(i had body{overflow-y:scroll;}, and body{overflow:visible;} in print.css not rewrited it...)
I fixed the problem by adding overflow:visible; and give it padding-right: 30px; to substitute for the scroll bars width.
I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
just setting display: inline solved my same problem.
Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;. My modal was originally position: fixed;.
For me setting overflow:visible; for body solved the problem.
body {
overflow: visible;
}
I've had this issue to. In my case, this was due to an
position: fixed;
Element. I changed this to
#media print{
position: relative;
}
Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.
If the items on the page are getting partially cut off, adding an :after element of 10px did it for me.
<div class="print-row">
<div class="print-items">
<div class="print-item"></div>
<div class="print-item"></div>
<div class="print-item"></div>
</div>
</div>
.print-items {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
}
.print-item {
break-inside: avoid;
}
.print-item:after {
position: relative;
display: block;
min-width: 100%;
height: 10px;
width: 100%;
content: "";
}
for me, the issue was this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
which putting any value other than 1 for initial scale solves my problem:
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>