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.
Related
I need to apply some styles to a div for printing. I can use a media query #media print {} to accomplish this easily. But I also sometimes need to apply the same styles on the browser itself, before the print dialog is opened. I'm trying to do this by adding a div .print-view to the page. But can't find a way to do it without code duplication.
I've tried this, but it's invalid css:
.print-view, #media print {
.grey-background {
background-color: white;
}
}
I've also tried this (scss), but it causes an error #extend may only be used within style rules.
.print-view {
.grey-background {
background-color: white;
}
}
#media print {
#extend .print-view;
}
Is there some other way for me to accomplish this?
Edit: changed sample code to more accurately reflect what I'm trying to do
Found the answer here. #include can be used to add a mixin into both a media query and a normal selector.
#mixin print {
.grey-background {
background-color: white;
}
}
.print-view {
#include print;
}
#media print {
#include print;
}
This compiles to the following css:
.print-view .grey-background {
background-color: white;
}
#media print {
.grey-background {
background-color: white;
}
}
I'm trying to hide a specific div using a media query which is working fine. However, I need it to show when that div is within another specific div. Is this possible. This is the CSS:
#media (min-width: 665px) {
.mrbcircle-ipad:not(.link-inside.mrbcircle-ipad) {
position:absolute;
display:none;
}
}
so .mrbcircle-ipad should be hidden over 665px unless it's within .link-inside.
Currently this is showing .mrbcircle everywhere so I know it's wrong. How can I fix this?
Thanks
Anthony
#media (min-width: 665px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
position relative;
display: block;
}
}
Use two rules inside the media query: The first to hide it when the viewport is wider than 665px, the second to make it visible if it's inside a certain parent:
#media (min-width: 666px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
display: block;
}
}
I have 2 buttons on my print page: Print and Export.
I have written CSS for them to be hidden when printing, but the Export button is still showing on my friend's PC. On my computer, the buttons are hidden, as they should be.
This is the code I use to hide the buttons:
#media print {
#print {
display: none;
}
#media print {
#export {
display: none;
}
just for information.. i have try to update the browser in that PC to try when my code doesn't support at the browser.
it looks like the wrong syntax. Did you try something like this:
#media print {
#print {
display: none;
}
#export {
display: none;
}
}
if this does not help. try to right-click on the button and choose inspect element option. There you have all css applied to the button. Probably some other css rule is applied with stronger selector (is higher in the list)
Club all the style declarations for each ID under the #media print media query like so:
#media print {
#print, #export {
display: none;
}
}
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
I have a menu bar that slides opened and closed. Its closed state is also what it looks like when the screen is sufficiently small. So, I basically have the same styles twice: once as a class and once as a media query.
Is there any way to avoid this?
Edit ¹:
I want to avoid having a media query style AND a class. It would be nice if there was some clever way of applying the same style via both a class and media query.
Edit ²:
Code example (for illustrative purposes):
menu {
width: 100px;
}
menu.closed { /*triggered via class addition in javascript */
width:10px;
}
#media (max-width:1000px) {
menu { /*notice how this is the same as the closed class*/
width:10px;
}
}
You have achieved the most compact code using pure CSS.
To achieve an even more dry CSS code, you can use a CSS preprocessor.
They are tagged as dynamic-css. Some of them are less, and sass.
Less example:
#small-menu: 10px;
menu {
width: 100px;
}
menu.closed {
width: #small-menu;
}
#media (max-width:1000px) {
menu {
width: #small-menu;
}
}
Sass example:
$small-menu: 10px;
menu {
width: 100px;
}
menu.closed {
width: $small-menu;
}
#media (max-width:1000px) {
menu {
width: $small-menu;
}
}