CODEWITHSUNDEEP
javascripthtmlcssbrowserprinting
Cosmin
Cosmin

Reputation: 113

CSS: Hidden elements still take up space on printed output

I'm using css to only print a section of a page:

    body {
 visibility:hidden;
    }
    .print {
     visibility:visible;
     background-color: white;
     margin: 0;
    }

The section above the element I want to print gets properly hidden in the print output, however it still takes up the area of space. I tested this by making a long vertical list of words. In the print output the same area of white space occurs without the words and then the element output occurs. This problem occurs on chrome and mozilla only. I've also tested the browser's margin options and that's not the problem.

Any ideas?

Upvotes: 11

Views: 14711

Answers (7)

Dhruvil Dhankani
Dhruvil Dhankani

Reputation: 21

if we want display:inline-block or display:block along with visibility hidden.

Then we can use follwing css as a workaround.

{
    visibility:hidden
    width:0px;
    height:0px 
}

Upvotes: 2

Robin Maben
Robin Maben

Reputation: 23034

Even visibility:collapse; does it! :)

Upvotes: -1

tcooc
tcooc

Reputation: 21199

Use @media for printing. For example:

@media print {
  * {display: none;} /*or if you want only the body*/ body {display: none;}
  .print {display: block;}
}

(only a rough example. an actual stylesheet should include all elements of a page instead of wildcards)

Then the stylesheet is only used when printing, or print previewing.

Upvotes: 2

CuriousCase
CuriousCase

Reputation: 775

use display:none; as you want to display only print and no part of body.

Upvotes: 1

starskythehutch
starskythehutch

Reputation: 3338

Try using display: none; instead.

Upvotes: 1

asgerhallas
asgerhallas

Reputation: 17714

Use display:none;

Upvotes: 1

Skilldrick
Skilldrick

Reputation: 70819

You want display:none not visibility:hidden. The latter makes the element invisible, but doesn't remove it from the document flow.

Upvotes: 18

Related Questions