Skip elements while printing an html5 css page, but also keep the structure unchanged

Question

I have a Bootstrap page and I want to print it in A4 size. I have few elements which I don't want to print from this page, I am using this solution to achieve this:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

How do I hide an element when printing a web page?

However when I use this, my structure of the page changes. That means if I skip say a text element, then at printing, that space is taken by another element. It should not happen.

I want to print this web page on a certificate template of A4 size.

score 0 · Answer 1 · edited Mar 13 '16 at 11:44

0

Use visibility:hidden instead of display:none. This will preserve the space occupied by the elements while still hiding them. display:none essentially renders the page as if these elements did not exist at all.

@media print {
  .hideprint {visibility: hidden;}
}

edited Mar 13 '16 at 11:44

Yogesh Chavan

37
8

answered Mar 13 '16 at 11:15

Aziz

7,685
3
31
54

that is it....thanks a lot Aziz ...just a small change @media print { .hideprint {visibility: hidden ;} } – Yogesh Chavan Mar 13 '16 at 11:31

score 0 · Answer 2 · answered Mar 13 '16 at 11:17

0

Using @media print you can set the display, I guess you are using display "none" so the layout changes.

You could use opacity or visibility spite of display. opacity:0 or visibility:hidden will keep the layout untouched, while making the elements dissapear (visually).

answered Mar 13 '16 at 11:17

miguel-svq

2,136
9
11

yes , I used visibility:hidden .. thanks @miguel-svq – Yogesh Chavan Mar 13 '16 at 11:35

Skip elements while printing an html5 css page, but also keep the structure unchanged

2 Answers2