How to only show certain parts with CSS for Print? - css

I have a page with lots of data, tables and content.
I want to make a print version that will only display very few selected things.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class.
Is that doable?
How do I achieve this?
EDIT:
This is what I have so far:
<style type="text/css">
#media print {
* {display:none;}
.printable, .printable > * {display:block;}
}
</style>
But it hides everything. How do I make those "printable" elements visible?
EDIT:
Trying now the negative approach
<style type="text/css">
#media print {
body *:not(.printable *) {display:none;}
}
</style>
This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...

Start here. But basically what you are thinking is the correct approach.
Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.
If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:
.printable * {
display: block;
}
That would apply the style to all children of the "printable" zone.

If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page.
This seems to work fine:
Example:
CSS:
#media print {
.noPrint {
display:none;
}
}
#media screen {
.onlyPrint {
display: none;
}
}
HTML:
<div class="noPrint" id="this_is_not_printed" >
<a href=links.html>
</div>
<div class="onlyPrint" id="this_is_only_seen_on_printer" >
<img scr=logo.png >
<img scr=letterhead.png >
</div>

A simple way:
<style>
.print-only{
display: none;
}
#media print {
.no-print {
display: none;
}
.print-only{
display: block;
}
}
</style>

I got here because I was curious about printing a chart generated by chart.js. I wanted to just print the chart directly from the page (with a button that does a 'window.print') without all of the other content of the page.
So, I got closer by using the technique from the answer here: Why can't I override display property applied via an asterisk? .
You have to apply the 'asterisk' to the 'body' element, not just by itself. So, using the example CSS that the OP (Nathan) added to the question, I changed it to this:
<style type="text/css">
#media print {
body * {display:none;}
.printable, .printable > * {
display: block !important;
}
}
</style>
Then adding that 'printable' class to the chart itself, as in
<canvas id="myChart" class="printable" width="400" height="400"></canvas>
Which removed all page elements on the printed output except the chart when the 'print' button is clicked (via this):
<script>
myChart.render();
document.getElementById("printChart").addEventListener("click",function(){
window.print();
});
</script>
So, perhaps this will help anyone that gets to this question via the googles.

Came across the same question recently and for me, this solution works just perfect:
#media print {
* {
visibility: hidden;
}
.printable {
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 10mm;
}
.printable * {
visibility: visible;
}
}
Since visibility: hidden doesn't remove elements, as display: none does, it is possible to change it for desired elements separately.

Nearly all browsers support it. It might be advantageous to use the media attribute on the link tag.
Using display: none; in some of your rules would be an appropriate way to handle your situation.

I suggest to hide the element that you won't print:
HTML
<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>
CSS
#media print {
.no-print {
display: none;
}
}

Related

Custom css code in wordpress

Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.

Is it possible to negate an element from receiving display:none using the :not pseudo-class in CSS?

<html>
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<body>
</html>
In linked CSS file (using Chrome):
#media print{
body:not(#myModal){
display:none;
visibility:hidden;
}
#myModal{ /*shouldn't have to but doesn't work anyway */
display:block;
visibility:visible;
}
}
This does not work. I am trying to get rid of everything behind the modal for printing without scripting. Apparently that is not possible. Can a display:none :not not negate elements contained within the container?
Edit: I have looked here, but cannot find the answer. https://www.w3.org/TR/css3-selectors/#negation
Edit: I want to hide everything except the modal. But display:none keeps that from happening. It does it for the whole body element, regardless of my negation.
Edit: Whatever it is, it does not work in the media call, so my current idea is to move the div. I thought there might be a better way. Edit: I also need display:none because print will still print the blank pages where the elements are hidden. display will remove those elements and allow me to print my modal without a bunch of blank pages of hidden elements.
display: none doesn't load the element or it's children. To Chrome, Firefox, etc., #myModal doesn't exist. Consequently, you can't use display: none as the way to did.
There are other alternatives though:
Option 1
#media print {
* {
visibility: hidden;
height: 0 !important; /* added !important with info from update */
}
#myModal {
visibility: visible;
height: auto !important;
}
}
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>
Option 2 This probably won't work with your new update.
#media print {
body > *:not(#myModal) {
display: none;
}
}
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>

CSS 3 not selector for print media

I am trying to print a part of my entire html document. I am using the below css to do that.
#media print { body * {
visibility: hidden;
}
#print-area * {
visibility: visible;
}}
It is working but as visibility:hidden reserves the space, it is printing a blank page and my content. I was trying to use :not selector from css3 to set all other divs but "print-area" to display:none as below,
div:not(#print-area){ display:none; }
This will result into a print of blank page. Looks like :not selector is not working with media print. Any suggestions/solutions for this will be most welcome.
Thanks
visibility: hidden; holds the space and it is hidden only. Show use display: none; to your body.
#media print { #wrapper {
visibility/: hidden;
display: none;
}
#print-area {
visibility/: visible;
display: block;
}}
Edit you should also declare for screen
#media screen { #wrapper {
display: block;
}
use this :
:not(#print-area){ display:none; }
Change the style rule for print media to be
:not(#print-area){ display:none !important; }
It's likely that any standard css reset in play on the page is outranking this style rule.

Hiding Google Translate bar

I have the following code:
<div style="" class="skiptranslate">
<iframe frameborder="0" style="visibility:visible"
src="javascript:''"
class="goog-te-banner-frame skiptranslate"
id=":2.container"></iframe>
</div>
I need to hide it but if I only hide the goog-te-banner-frame using:
.goog-te-banner-frame {
display:none !important
}
It still throws my header down. If I use this:
.skiptranslate {
display:none !important
}
It also hides the language selection dropdown because it shares the same class.
I'd like to hide the skiptranslate div that CONTAINS the goog-te-banner-frame.
How do I do that?
Edit:
This is actual code to "create" the translate div above:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false,
includedLanguages: ''}, 'google_translate_element');}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Ok, this works for some reason:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
The selected answer is wrong!
I know this is an old question, but for anyone coming across this problem in the future, the easiest way:
body > .skiptranslate {
display: none;
}
Since the iframes are dynamically added directly to the body, you can simply select only direct descendants and nothing deeper.
This works for me:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
Why don't you just add an id to the skiptranslate div that holds the goog-te-banner-frame? <div id="something" class="skiptranslate" style=""> will then allow you to style div#something { display: none !important; }
Try to add another class, say .myClass {display: none;}, append to skiptranslate, like class="skiptranslate myClass"
EDIT:
Another solution:
You can also wrap the google translate code with another div, say <div id="google-wrapper">... google translate code...</div> and then style the wrapper with display: none;
OR
See this fiddle: http://jsfiddle.net/SryPD/
I found this to work the best for me. I send the Google Translate "origninal text" tooltip to z-index: -1000. So it is still in the page, but out of sight.
// Force hiding of "original text" popup for menus, etc. (very annoying)
jQuery(selector).bind(
"mouseenter mouseleave",
function (event) {
if (event.type === 'mouseenter') { google_trans_tt.css('z-index', -1000); }
else { google_trans_tt.css('z-index', 1000); }
}
);
October 2022: None of the above answers worked in my case.
I made it work by simply changing the z-index: of my website's menus, after I found the z-index: of the google translate's iframe (using of course the Developers Tools).
It works for me.
.goog-te-gadget img{
display:none !important;
}
body > .skiptranslate {
display: none;
}
body {
top: 0px !important;
}

Hide all elements except one div for print view

I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.

Resources