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.
Related
I need to create a printing service, that can be called from different components throughout my application. The service method accepts two parameters, the component that needs to be compiled and printed, and the printing orientation (Portrait or Landscape).
Everything works fine, except the orientation. Either it is not set, or it sticks with the secondly applied orientation. What I mean by secondly applied orientation is, I have two buttons for testing purposes. Each button calls different component and sets different orientation. If I click the buttons in the following order: Portrait orientation and then Landscape orientation, no matter what I press after that, the page is printed in Landscape, and vice versa.
So far, I have tried the following:
defined two different div elements conditionally generated (with ngIf directive). Each div contains <style></style> elements with appropriate page orientations. The style elements are not rendering, hence orientation is not changed
page orientation is defined within the component's style/stuleUrls metadata. This produces the problem with the secondly applied orientation as described above
add styling to the dynamically created components with ComponentFactoryResolver. The styling to the page is not applied
The component is dynamically generated using the ComponentFactoryResolver. For simplicity, I won't post that code. I will post it if it's needed.
This html is added in the app.component.html:
<div class="print-section">
<div *ngIf="printOrientation === orientationEnum.Landscape">
<style>
#media print {
#page {
orientation: landscape !important;
}
}
</style>
</div>
<div *ngIf="printOrientation === orientationEnum.Portrait">
<style>
#media print {
#page {
orientation: portrait !important;
}
}
</style>
</div>
</div>
The same code is added within the component style/styleUrls metadata.
I have also tried adding classes to the generated components dynamically, after the component is created:
let element: HTMLElement = <HTMLElement>componentRef.location.nativeElement;
this.printTemp.layout === PrintLayoutEnum.Landscape ? element.classList.add('landscape-print') : element.classList.add('portrait-print');
This doesn't affect the orientation at all.
Expected outcome is to change the orientation appropriately. Either by setting the style in app.component.html, or by applying the dynamically when the component is rendered with the ComponentFactoryResolver. I prefer the second options, but either one should be fine.
I got tunnel vision and I tried to over-complicate the solution. I created a style element with id. During the component creation with the ComponentFactoryResolver, I simply appended the desired style:
let styleElement = document.getElementById('print-style');
styleElement.append('#media print { #page { size: A4 landscape; } }')
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 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.
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;
}
}
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?