I'm trying to hide all elements except those within a "print" div. I'm not sure my syntax is correct:
#media print {
body *:not(#printable *) { display: none; }
}
So you want to print just printable right? If this so the solution is this:
#media print {
*
{
display: none !important;
}
.printable
{
display: block !important;
}
}
You hide all elements but not elements with printable class
Related
How do I conditionally apply a #media print css ruleset ONLY when a certain div is present on the page.
I have the following css which helps when printing #mytargetdiv:
#media print {
.inside-article > :not(#mytargetdiv), .inside-navigation, .site-footer {
display: none;
}
}
It works great, except that some pages have #mytargetdiv and some do not contain a div with that id. If a div with the id #mytargetdiv is NOT present on the given page, then I do not want to apply this #media print rule.
How do I exclude this #media print css rule on pages that do not contain #mytargetdiv.
You can check for existence of the id using Javascript, then add the styling if it is found.
if (document.getElementById('mytargetdiv') != null) {
var style = document.createElement('style');
style.innerHTML = '#media print { .inside-article > :not(#mytargetdiv), .inside-navigation, .site-footer { display: none; } }';
document.body.appendChild(style);
}
Anyone have idea how can I hide text, date or something on page, but when I click button for window.print() show it there?
I'm using:
#media print {
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print {
.hide-from-printer{ display:none; }
}
Print
So like this button class="hide-from-printer", it shows on page but hide from printing page. I want to do vice versa (on the contrary). Any suggestion?
Use this way:
.hide-from-page { display:none; } /* hide at normal page view */
#media print {
.hide-from-page { display:inline; } /* make it visible during print */
}
Note: its obvious to rename the class to mean correctly (instead of hide-from-printer, it must be something like as hide-from-page or show-only-at-print)
you can use ´screen´ for regular screens so all you would have to do is
#media screen {
.hide-from-screen {
display: none;
}
}
#media print {
.hide-from-printer {
display: none;
}
}
and use those classes accordingly.
I have some elements inside a DIV which get reordered depending on the size of the screen. I want to style each of these elements differently depending on their flex-box order. Because the media queries are inside a framework, I'd rather not write my own media queries to do this, because I don't want to have to remember to change my media queries if the framework changes the break points for their media queries. I tried using the + sibling selector, but apparently this only applies to the order of elements in the original markup, not the flex box rendering order. Is there any way to style an element based on the order in which it appears in the rendered DOM?
As mention in the comments, you wont be able to use nth-child, as the styles will apply to the order of the actual DOM, not the rendered DOM.
You will have to add extra classes to the markup in order to do this.
So rather than re-order using nth-child, re-order using the extra classes.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexGrid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.flexGrid__item {
border: 1px solid pink;
width: 50%;
height: 100px;
}
.flexGrid__item--alpha {
background: pink;
order: 1;
}
.flexGrid__item--bravo {
order: 2;
}
.flexGrid__item--charlie {
order: 3;
}
.flexGrid__item--delta {
order: 4;
}
#media screen and (min-width: 500px) {
.flexGrid__item {
width: 25%;
}
.flexGrid__item--alpha {
order: 5;
}
}
<div class="flexGrid">
<div class="flexGrid__item flexGrid__item--alpha"></div>
<div class="flexGrid__item flexGrid__item--bravo"></div>
<div class="flexGrid__item flexGrid__item--charlie"></div>
<div class="flexGrid__item flexGrid__item--delta"></div>
</div>
More detail in this fiddle:
https://jsfiddle.net/pua5u8a4/1/
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.
I have a div called "divContainer" inside which i have few input elements like textboxes,radio buttons et..
How can i define the style for then in the CSS ? I wanna mention styles for elements inside this purticular div.not for the entire form.
Ex: For textboxes i need width as 150px;
For Radio buttons i need width of 20px;
You can define style rules which only apply to specific elements inside your div with id divContainer like this:
#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */
CSS 3
divContainer input[type="text"] {
width:150px;
}
CSS2
add a class "text" to the text inputs then in your css
.divContainer.text{
width:150px;
}
Like this.
.divContainer input[type="text"] {
width:150px;
}
.divContainer input[type="radio"] {
width:20px;
}
When you say "called" I'm going to assume you mean an ID tag.
To make it cross-brower, I wouldn't suggest using the CSS3 [], although it is an option. This being said, give each of your textboxes a class like "tb" and the radio button "rb".
Then:
#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }
This assumes you are using the same classes elsewhere, if not, this will suffice:
.tb { width: 150px }
.rb { width: 20px }
As #David mentioned, to access anything within the division itself:
#divContainer [element] { ... }
Where [element] is whatever HTML element you need.