So I'm trying to print (CTRL+P) a page. I have all the resets I need, so I don't need to worry about margin or padding around my document. However, I simply cannot get the size to match an A4 page. Here's what I have tried:
#media print {
.page {
height: 297mm;
width: 210mm;
margin: 30mm 10mm;
}
}
I have also tried:
#media print {
#page {
height: 297mm;
width: 210mm;
margin: 30mm 10mm;
}
}
I have also tried simply doing:
.page {
height: 297mm;
width: 210mm;
margin: 30mm 10mm;
}
But all of these simply won't make my print fit. When I throw a border: 1px solid #000 on my .page element, the page is pretty much 50% of the A4 page.
What I want to achieve is: I have 1-many .page elements. No matter how many there are, I NEVER want to print an empty page (like if one page suddenly is 1px too tall). How can I achieve something like this?
Some printers have default settings that can be set to print without edges. Try to look at printers settings when you try to print again. It has nothing to do with css all the time.
Related
I am working on a report automation tool that will print out a monthly report with charts and graphs. The problem I'm having is with one component that may take more than 1 page to print. When I make the headers and footers appear on every page they cover part of the graphs instead of forcing the graph down below the header/above the footer.
So far I have tried several #media print options in CSS like the below code. Is there a better way to do this? Perhaps programmatically in Javascript? I would also like to keep a page count in the footers dynamically without relying on the default print option footers from the browser if anyone has some advice on that as well.
.kpi_wrapper {
break-inside: avoid;
margin: 10px 10px 10px 10px;
}
#media print {
#page {
margin: 0px;
margin-top: 5px;
}
html {
margin-top: 50px;
}
.menu {
display: none;
}
.upload {
display: none;
}
}
I have the following Jade template:
extends layout
block content
h2 Characters and Portraits
div(id="portraitsBox")
- var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
for filename in portraits
- var url = "/images/portraits/" + filename.toLowerCase() + ".png"
div(class="characterBox" id=filename)
h3(class="characterName")= filename
img(class="portrait" src= url)
link(rel='stylesheet', href='/stylesheets/characters.css')
Which pulls from the following CSS:
#portraitsBox {
border: 1px solid black;
padding: 10px;
}
.characterBox {
position: relative;
padding: 5px;
border: 1px solid black;
width: 350px;
display: inline;
}
.characterName {
padding-top: 0px;
width: 150px;
font: Arial;
text-align: center;
}
This works fine if I take out display: inline, but every time I try put it back in I get this garbage:
http://www.orderofthemouse.co.uk/characters
And the container div resizes itself to 169.9px wide!!?
What's going on here? I checked with Firebug and it doesn't look like any of the Bootstrap default stylings are over-riding my own CSS (they're called in the extended layout file) or anything like that, and there's nothing in the cascade that should be causing it, to my reckoning. When I look at the generated HTML all the elements are nested as expected, which was my next consideration so it doesn't seem to be anything silly I overlooked...?
Do you want to get this result: http://screencast.com/t/c06yM3cr
I am confused because you said that it works fine if you disable display inline, and when I tried that they were still displaying as block.
If your desired result is what I have in the sceenshot, all you have to do is set the wrapper #portraitsBox to display: flex.
I'm trying to make a website that is essentially a few vertically positioned slides. I had been hoping to make a responsive design so my "slides" are appropriately resized on larger screen sizes or are padded appropriately in strange dimensions. Here is my LESS file setting the appropriate dimensions:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
//============================================================
// Dimensions for each section for standard desktop screen
//============================================================
#home {
#media screen and (min-aspect-ratio: 16/10) {
height: 92%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 57.5vw;
}
}
#about {
#media screen and (min-aspect-ratio: 16/10) {
height: 108%;
width: 160vh;
padding: 0 calc(50% - 80vh)
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 67.5vw;
}
}
#experience, #hobbies, #contact {
#media screen and (min-aspect-ratio: 16/10) {
height: 100%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 62.5vw;
}
}
//============================================================
// colors
//============================================================
#home {
background-color: black;
}
#about {
background-color: #488BFF;
}
#experience {
background-color: #B3B3B3;
}
#hobbies {
background-color: #FF7F35;
}
#contact {
background-color: #803A7D;
}
It seems to work for the most part when I run it with a simple html file with the 5 divs (home, about, experience, hobbies, contact). However, on chrome, a bug seems to occur while I resize. Sometimes, my webpage simply disappears, replaced with some black/gray cross. If I resize very quickly (rapidly resizing the window), a checkerboard appears or even some other webpage completely on a different tab. I tried testing resizing another webpage also using media queries, and this problem did not happen. Is there something inherently wrong with how I'm using media queries?
EDIT: Sample images showing the strange problems:
After a long and arduous chat session, we have worked out a fix for the bug. Here is the summary:
What's Wrong
For some reason, Chrome has a problem rendering large divs. As of now, I'm not sure where the bug lies exactly, but a simple example with 5 100% width/height divs causes this strange problem. Here is a JSFiddle with this example. The bug only manifests outside of a frame, so you must copy the frame source into its own webpage.
From what I can gather, something strange is happening under the hood in Chrome's rendering engine on Windows, which causes the strange black & gray crosses to appear when resizing a window.
The Fix
The fix isn't very elegant, but it works. Simply apply a transform:rotate(0) on each of the divs to force gpu acceleration. With this, the cross vanishes. Here is the resulting JSFiddle that applies this fix on the previous example.
TL;DR
When Chrome isn't rendering the pages with the graphics card, strange things occur. Use transform:rotate(0) on broken items to force graphic card rendering.
My app generates printed reports by creating an invisible iframe and then printing it. My latest in a depressingly long list of problems I'm trying to solve is optimizing the CSS for different printed page sizes. IE9 seems to work a bit (but has other issues, like ignoring #page { margin:... }), but no luck at all on FF or Chrome.
My code looks like this:
#media print and (width: 210mm) and (height: 297mm) {
... stuff for A4 size ...
}
#media print and (width: 8.5in) and (height: 11in) {
... stuff for US letter size ...
}
Neither of these rules is being matched, ever, in Chrome or FF. I also tried device-width and device-height, and those didn't work either (they seemed to be reporting the absolute maximum sizes of the printer, rather than the page size). I can't figure out what value "width" and "height" are returning, is there a way to tell?
Is there a reliable way to detect printed page size using media queries? I'm pretty close to concluding that there is simply no way to control printing in any consistent way across browsers, and throwing in the towel on this.
Just try this code May be this can fixed your problem.
<page size="A4"></page>
Css
#page {
size: A4;
margin: 0;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 12px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 210mm;
height: 297mm;
}
#media print {
body {
margin: 0;
box-shadow: 0;
background: rgb(204,204,204);
}
}
I'm trying to display a scrolling list inside a speed dial box but have a problem with the positioning
I want to know when the list object is too big to fit the box, but as far as I know, there's no way of getting the size of the box in pixels
how can I get the minimized mode to show exactly what it's seen in the normal mode but fitting the box?
this is the CSS I'm using right now
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background: #eee;
color: #444;
display: table;
height: 100%;
width: 100%;
}
output {
position:absolute;
width: 100%;
white-space:nowrap;
font-family: monospace;
}
it works fine if I open the file in a tab, but in the speed dial it's displayed zoomed in
Opera's guide uses this query:
#media screen and (view-mode: minimized) { }
which controls the way it's displayed in the speed dial, I think. but I don't know what to put in there
UPDATE
well, I ended up creating an element and assigning a bottom value of 0
like this:
var bottom = document.createElement('div');
bottom.className= "ylimit";
document.body.appendChild(bottom);
and in CSS:
div.ylimit{
position:absolute;
bottom:0px;
}
then whenever I want to check or compare the height, I use bottom.offsetHeight