I have a site where my colleagues need to print off a list off addresses on stickers, which means each address must be contained within a certain sized rectangle (3.5cm*5cm), is there a way to define this in html (in a table perhaps?)?
You can use css exclusively for print alone
#media print {
/* All your print styles go here */
}
Related
Inside vaadin-grid.css I managed to get the #table element which contains the grid's rows
and with for example
#table th {
backround-color:green;
}
I can change its color.
Now I need to do that only when the page is printed.I tried adding inside vaadin-grid.css
#media print {
#table th {
backround-color:green;
}
}
but that has no effect.Note that I print the page using javascript print().
I added an id="viewfgrid" (as seen in the screenshot) to the enclosing grid and with that now when I add
inside shared-style.css
#media print {
#viewfgrid {
outline:green;
}
}
I can access and change the grid when printing.
However I can't access the inside table with the rows.I tried various variations like
#media print {
#viewfgrid #table {
background-color:green;
}
}
#media print {
#viewfgrid :host > table {
background-color:green;
}
}
but no effect.
How can I access that table ?
Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect
thanks
I’m not sure why #media print would not work from within the Grid’s shadow DOM styles. Did you try in different browsers? I wonder if there’s some browser bug/limitation here, similar to the fact that you can’t define a #font-face inside shadow DOM.
Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect
The host selector targets the same element as the #viewfgrid ID. To select a host element with a specific ID, you can use :host(#viewfgrid) inside the shadow DOM styles.
Notice, that you should not rely on any ID, class name, or raw tag name selectors when styling Vaadin components (for example #table or th. Those are considered internal implementation details / private API, and can change in any release. You should only rely on the :host(...) and [part~="..."] selectors and state attribute selectors (for example, [focused]).
If there really is a limitation in using #media print inside shadow DOM styles, I think your best option is to use the ::part() selector, which allow you to style named parts inside the shadow DOM from the outside/light DOM styles. That is actually a more robust method than relying on injecting styles into the shadow DOM (via the frontend/mytheme/components/vaadin-grid.css file).
styles.css:
#media print {
#viewfgrid::part(cell) {
background-color: green;
}
}
The API docs show all available parts of the Grid (look for the "Styling" section): https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha3/#/elements/vaadin-grid
Grid is by design not very printing friendly as it has been designed for "infinite vertical scrolling". You wont for example have headers and footers per page. If you want to include "report" functionality to your application, it is better approach to create separate report view that is designed printing friendly instead of screen use. This will allow you to use different layouting and components in it. You can for example generate multiple Grid's for each page. Or use BeanTable component from Directory, which generaters HTML Table without shadow DOM.
Because apparently you can't access the shadow dom from CSS when there's no 'part' tag on the element,as is the case with this table,I got it by using Javascript as in :
UI.getCurrent().getPage().executeJs("const tabledom = document.querySelector(\"#viewfgrid\").shadowRoot.querySelector(\"#table\");
tabledom.style.cssText+='.....' "
So now this snippet is called when the user clicks on a Print button and you can do whatever with the element's style.In my case I flatten the table so that it can be printed without the scrollbar intervening.
I am planning price list available for clients online and I was thinking about simple very long page or div container with some anchor links aside to help jump to different products.
However in case someone wants to print off just price list with certain products I don't want all the pages to print off but only current one.
Is there any print breaking character or tag?
Just in case someone has better idea all I want to achieve is having price list in html to change it in one place but still be able to convert separate product price lists into PDF files for emailing purposes of particular product.
Use this CSS:
#media print
{
.page-break { display:block; page-break-before:always; }
}
and then cite this in your HTML where you want the page to break:
<div class="page-break"></div>
And there you go :)
As per w3schools, you can also do the following:
#media print {
.page {page-break-after: always;}
}
and then, in your HTML:
<div class="page">
<!-- Page Contents -->
</div>
Or, if you have a footer under every page (for example for page numbering):
#media print {
footer {page-break-after: always;}
}
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 have many divs that proposed to be printed - on different pages.
How can I make sure that when the user is clicking the print button, each div will be on a different page?
Thanks!
You can use the page-break-after attribute in the print media query. The advantage is, that you don't have to change the size of your divs, it just makes sure that the page break will be after the div.
#media print {
div {
page-break-after: always;
}
}
More information about page-break-after on MDN.
In css, there is a media query you can use to specifically format your web page for when you want to print it:
#media print {
/* insert your style declarations here */
div {
page-break-after: always; /* ensures the next will we appear on new page */
}
}
You can use this media query to make each div fill up an entire page when the user decides to print. You can use this to modify things like removing the navbar when the user decides to print.
On the other hand, to avoid direct breaks after a certain element use page-break-after: avoid;
You can also for the use to print in a certain format that you want to specify using the follow:
#page {
size: A4; /* or A4 landscape or A5 */
}
I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*