So i have this generated page i want to print - http://hubog-2017.com/print_prog_en
I break the page after each table. In the second table, one of the texts is too long and it breaks into two pages (Pages 2 and 3). Now the problem is that the text gets outside its TD and i see it on the THEAD.
I tried using word-breaks and padding's with no success.
Managed to get a partial solution by adding this CSS:
Its not exactly how i wanted it to look but at least the text is not breaking...
#page {
size: A4;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
}
Related
How do I print a div element so that it is positioned towards the bottom of the page it is on, but is not a footer and is to be printed once only no matter how many pages there are to print (when I set it as a footer it apparently started printing itself on every page)
Also, if there is not enough space on the page to have it printed, it is to jump to the second page.
What it is
I have a div block that is a legend for a table. It describes fields of the table in more detail.
Things I have tried so far
I have tried the fixed footer approach:
#media print {
#legend {
position: fixed;
bottom: 0;
}
}
Somehow it started printing my legend on all pages and not just the first page where I need it. Also when my table is too long, it overlaps the legend. That is not desirable. I am not sure how to proceed.
I seem to be having some success with
#media print :first {
#legend {
position: absolute;
bottom: 0;
}
}
and then programmatically breaking up the table in my code, to where i.e. after row 25 I insert a class into the row to force a page break. Or after row 25 stop this table (</table>), restart a new 2nd one (<table>), which will flow onto the next page
I've a html page with two divs and one button.
what I want to do is when clicking on the button print the two divs. The first one in landscape orientation and the second one in portlet orientation. I've tried this code but it doesn't work:
#page { size: A5; margin: 0; }
#page:first { size: A5 landscape; margin: 0; }
the second div breaked into two pages as below
enter image description here
which it doesn't happen when using only portlet orientation.
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
I am trying to do a module where I list orders between dates.
I have set the needed parameters in CSS like this:
#page {
size: A4;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
...
}
As header, each page should display the name of the buyer and the order number. I have managed to do this using a DIV having page-break-after: always CSS code after each order. This way each order begins on a new page.
The problem is that when I have too much items in the order and the orders are listed on more then one page. In this case on the second page I don't have the header displayed and I need it.
I have tried to use a div with css attributes like: top:0; position: fixed; but every single header gets displayed on all the pages, which is not good.
UPDATE:
I need the header of the actual order each page of the order. So if I have i.e. 40 items in an order (which does not fit into one page) then I need the header of this order listed on both of its pages.
This is how it works with position:fixed:
After hours of different unsuccessful tries (1. using exact width font like Courier New and calculating the height of each item, 2. using javascript, jquery to see if the bottom of each item exceeds the limit of space for a page, I've put pagebreak, etc...) I have found the best solutions for this here .
If you use
thead {display: table-header-group; }
the header is displayed on each printed page's header. The same is true for tfoot:
tfoot {display: table-footer-group; }
So far I'm only managing to handle the first page, but my focus is the last, the last I want to be in landscape orientation.
I used it on the first page,
#page :first {
size: A4 portrait;
}
#page {
size: A4 landscape;
}
I tried the most obvious, like # page: last but not available
is an example
http://jsfiddle.net/AFLPY/2/
As far as I'm aware there's no way to control it. (See edit below!!)
The spec only seem to offer :first without a :last counterpart.
References:
http://dev.w3.org/csswg/css-page/#at-page-rule
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Edit:
What about something like this example from the w3 spec?
In this example, the two tables are rendered on landscape pages
(indeed, on the same page, if they fit). The page type "narrow" is
used for the after the second table, as the page properties for
the table element are no longer in effect:
#page narrow { size: 9cm 18cm }
#page rotated { size: landscape }
div { page: narrow }
table { page: rotated }
with this document:
<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>
So, if you set an #id for the last element on the last page, you could perhaps style it that way?