Hiding element when printing? Bootstrap 4

[toolman]

Hi there,

I am trying to hide an outer circle of an element which displays a percentage.

I have found out that bootstrap 4 has built in print hidden classes.

However, when I apply it, it is hiding it on desktop.

This is my code:

<div class="c100 p55 d-print-none">
                    <span>55%</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>

Can anyone see what I have wrong? The class kind of works, but it hides the outer circle on desktop and both the score and the circle when printing.

I basically need to hide all the elements in the above when printing and only show the 55% when printing.

Thanks!

[PaulOB]

The d-print-none will hide the whole div and all its contents when printed. It should have no effect on desktop.

@media print {
 .d-print-none {
  display: none!important;
 }
}

Once you hide the whole div with display:none you can’t reveal any part of its children.

I don’t know what styles you have applied to c100 so can’t offer a solution.

You could add d-print-none to .slice instead but of course if you have styles applied to c100 then these would still show.

I suggest you just set up a media print and negate the styles you don’t want.

e.g. Add a class to the parent and then…

@media print {
 .c100print {
  background:transparent;
 color:#000;
 /* etc.  -negate all styles not needed for print */
 }
.c100print .slice{display:none}
}

That’s just a rough idea but you should get the picture

(Note the print styles should follow after the original rules and not before them.)

[toolman]

Thank you very much for the reply