Using the sample code below, how I can make the div with an id="print" as the only thing printable without having to make each individual item non-printable. The goal would be leave class="d-print-none" on the "content" div but be able to make the "print" div printable.
I'd like to do this with scss so the print comes out correctly whether you're using window.print() or a browsers print function
<div id="content" class="d-print-none">
<div>Some Text</div>
<some-component></some-component>
<div>Something Else</div>
<some-other-component></some-other-component>
<more-components></more-components>
<div id="print">Some print stuff
<some-print-component></some-print-component>
</div>
<div>More non-printable stuff</div>
<non-printable-component></non-printable-component>
</div>
Set all child elements on #content to be non-printable, except #print:
#media print {
#content > *:not(#print) {
display: none;
}
}
If #print is not directly below #content, you should do it this way:
#media print {
#content * {
display: none;
}
#content #print, #content #print * {
display: block; /* Change as necessary */
}
}
Or, in one rule:
#media print {
#content *:not(#print, #print *) {
display: none;
}
}
Related
I have a container and three parts in it. I want to make unvisible thirth part while addind class to the parent container. But my codes not works...
Here is the HTML code:
<section id="parts" class="two-parts">
<div id="partOne">...</div>
<div id="partTwo">...</div>
<div id="partThree">...</div>
</section>
Here is the SCSS code:
#partThree{
display: block;
.two-parts &{
display: none;
}
}
I want to hide #partThree div, when #parts div has .two-parts class.
Guys! I found the problem. I checked the output of Scss to Css, and here is the Css output:
.two-parts body #parts #partThree {
display: none;
}
It should be #parts.two-parts #partThree. But why is that goes to the top of all elements?
As I have answered in your other post:
It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:
#partThree{
display: block;
}
&.two-parts #partThree {
display: none;
}
The & takes EVERYTHING before the current line. So if your final SCSS is:
body {
#parts {
#partThree {
display: block;
.two-parts & {
display: none;
}
}
}
}
Then the & will add .two-parts before everything else, and make it:
.two-parts body #parts #partThree {
display: none;
}
The easiest way to achieve what you need is by setting .two-parts and #partThree as siblings, and apply ~ css operator.
<style>
#partThree {
display: block;
.two-parts ~ {
display: none;
}
}
<style>
<section id="parts">
<div id="partOne">...</div>
<div id="partTwo" class="two-parts">...</div>
<div id="partThree">...</div>
</section>
this will only work if #partThree and .two-parts siblings and .two-parts comes before.
Using FlexBox and Sass, I am trying to create stacked vertical bars as shown in the images pasted below. What I am expecting is the vertical text to take up the one-columned row, creating a stacking effect. What is happening, though, is the text is overlapping.
The html mark up is like so:
<div class="container__row">
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<h1>Another section</h1>
</div>
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Design
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
GIS
</div>
</div>
</div>
<div class="container__row">
This is the Sass .scss code that makes up the css styling:
//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query for each breakpoint
#mixin create-mq($breakpoint) {
#if($breakpoint == 0) {
#content;
} #else {
#media screen and (min-width: $breakpoint *1px) {
#content;
}
}
}
#mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
#include create-mq($breakpoint) {
//class to set up columns for all screen sizes - mobile first
#for $i from 1 through $grid__cols {
&__col#{$modifier}-#{$i} {
flex-basis: (100 / ($grid__cols / $i)) * 1%;
}
}
}
}
.container {
max-width: $grid__bp-md * 1px;
margin: 0 auto;
//attribute to override max width
&--fluid {
margin: 0;
max-width: 100%;
}
//attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
&__row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
#each $modifier, $breakpoint in $map-grid-props {
#include create-col-classes($modifier, $grid__cols, $breakpoint);
}
}
p {
font-size: .85em;
color: #aaa;
}
}
.skills-bar {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
There is this strange overlap that happens. Can anyone suggest why the vertical text won't make rows?
If you look in the inspector, you can see that the original height of the container isn't being effected by the transform and that's why this is happening. I can't think of a way around it without measuring the new height after the transform with js.
I'm not sure what browsers you need to support, but text-orientation / writing-mode will do, mostly, what you need without js.
.skills-bar {
writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support
text-orientation: upright;
float: left;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
In order to measure the divs after the css transform, I used getBoundingClientRect().
With a few lines of jquery, I got what I needed:
$(document).ready(function(){
var skills = $(".skills-bar")
$.each(skills, function(i, div) {
console.log(div);
var dimensions = div.getBoundingClientRect();
console.log(dimensions);
$(this).css("width", dimensions.width).css("height", dimensions.height);
});
});
I am trying to print the HTML page which contains a div with lots of content inside it. The HTML of the page is as follows:
<div class="outer">
<div class="inner">
<ol>
<li>Content goes here</li>
<li>Content goes here</li>
.....
.....
</ol>
<ol>
<li>Content goes here</li>
<li>Content goes here</li>
.....
.....
</ol>
...............
...............
</div>
</div>
The print media css is as follows:
#media print{
.outer{
display:inline;
overflow:visible;
}
}
But when I open the print preview of this page, the div content is missing. Print preview displays some content from start of div, then blank (about two pages) and some end content of div.
It should be work if you go with following way:
<!DOCTYPE html>
<html>
<head>
<style>
#media screen {
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}
#media print {
.inner {
font-family: georgia, serif;
font-size: 20px;
color: red;
}
}
</style>
</head>
<body>
<h2>The #media Rule</h2>
<div class="inner"><b>Test it!</b> Print this page (or open Print Preview), and you will see that the text will be displayed in blue, and in another smaller font.</div>
</body>
</html>
I take w3school.com #media-print example and change according to your requirement it showing font changes and apply css while try to print.
Thanks.
This is my code, it works fine to me.
I want to print with css #media the "Invoice" class.
"No-print" class will be disabled.
HTML
<div class="pad margin no-print" style="overflow:hidden;margin-top:20px">
<div id="divControl" class="col-lg-6 col-md-6" style="margin-top:10px"></div>
</div>
<div class="content invoice">
<div class="col-sm-4 invoice-col">
<address>Dirección:</address>
</div>
<div>
CSS
AT THE TOP OF CSS:
/* Don't display when printing */
#media print {
.no-print {
display: none;
}
.left-side,
.header,
.content-header {
display: none;
}
.right-side {
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#page { /* with this margin, no extra blank page to me */
margin: 0mm auto; /* this affects the margin in the printer settings */
}
}
AT THE BOTTOM OF CSS:
/* Enhancement for printing */
#media print {
.invoice {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
.invoice-col {
float: left;
width: 33.3333333%;
}
.table-responsive {
overflow: auto;
}
.table-responsive > .table tr th,
.table-responsive > .table tr td {
white-space: normal!important;
}
}
I'm trying to define a section of HTML that will not be displayed if the
media type is "print" instead of "screen".
I've tried:
{code}
<html>
<head>
<style type="text/css">
#media print
{ .not_print: { hidden: true; }
}
#media screen
{ .not_print: { hidden: false; }
}
</style>
</head>
<body>
<span class="not_print">
<p>This should not be displayed if printed / print previewed.</p>
</span>
</body>
</html>
but the section is not hidden if the page is printed / print-previewed by Firefox (36.0,Linux x86_64).
Any ideas ? Anyone managed to define HTML sections that won't be printed?
Thanks in advance for any replies.
I think you are searching for something like the following:
Only shown when printed:
#media print {
div {
display: block;
}
}
#media screen {
div {
display: none;
}
}
Or only shown on a screen:
#media print {
div {
display: none;
}
}
#media screen {
div {
display: block;
}
}
I should mention I was trying to define a CLASS of section that would not be printed, not ALL "div" elements, so I ended up using:
I should mention I was trying to define a CLASS of section that would not be printed, not ALL "div" elements, so I ended up using:
#media print
{ .no_print { display: none; }
}
#media screen
{ .no_print { display: block; }
}
...
<div class="no_print">
this section will not be printed ...
</div>
My code :
<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>
<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>
css code I tried:
.top-class:hover + .body-class { display: block; } /* This is working */
But, I want that to happen when header is clicked. So, i tried this:
.top-class:visited + .body-class { display: block; } /* DIDNT work */
The pseudo class "active" seems to do the job
.top-class:active + .body-class { display: block; background-color: red; }
You can check my jsfiddle
You can use tabindex in you first div then it can have focus event on.
<div class='top-class' tabindex=1>Header Name</div>
Then in css you test focus pseudo class
.top-class:focus + .body-class { display: block; background-color: red; }
Check this jsfiddle